Animation in the Air
Hi, there
No more words
Why am I interested in and so worry about?
Simple
I'm an aesthete
Explanation
1st Reason
The beauty of the site is equal to its convenience, real or potential benefits to the visitor.
2nd Reason
Brain work requires significant body resources. People tend to minimize the thought process.
3rd Reason
The Internet is integrated into everyday life.
Don't forget about fun
How to realize it?
Need a material
Cases
- HTML elements with CSS
- Canvas
- Svg
How make it alive?
First thought about CSS, right?
When it's good to use?
If we talk about CSS
Cases
-
the animation is simple (e.g., button hover animation)
-
the animation should work even if JS is disabled (e.g., loading bar)
What about JS?
Cases
-
the animation requires a complex timeline
-
the animation is not supported in CSS or works better with JS animation.
Why you think so?
Blame for GPU!
Javascript > Style > Layout > Paint > Composite
Browser renders a webpage
We have for animation
60
frames per second
16
ms to spend for each frame
Over this
Get experience with
JANK.
What about real cases?
What libraries do you know?
When them better to use?
GSAP
GREENSOCK ANIMATION PLATFORM
My life case
- TimeLine
- make pause, reverse, resume
- fromTo, from,set
- KillTweensOf, killAll
- 3D animation
- yoyo,ease,scale
TweenMax
Animation Workshop
By Khrystyna Landvytovych
