Some tips to use in web animation using AnimeJS. Presentation for We Summer Code Wolox 2019.

2. Animation on the Web
UI/UX Animation
vs
Standalone Animation

3. CSS and
JavaScript
Animation

4. CSS offers: Transitions and Animations
to add movement to the web.
However, JavaScript is still a big player.

5. Turn to JavaScript for animations if:
1 You need to chain or stagger your animations on more
than a few elements.
2 You are animating SVG graphics.
3 Your project needs to support older browsers where CSS
animation is not available.

6. Anime.js
It is a flexible yet lightweight JavaScript animation library.
It works with CSS, Individual Transforms, SVG, DOM and JS Objects.

7. The Ultimate
Guide

8. Duration and Speed of
the Animation
Slow enough to notice the change.
Quick enough not to cause waiting.
Example 01

9. Duration and Speed of
the Animation
Optimal Speed: 200 to 500 ms.
Wearables: 150 to 200 ms.
Mobile: 200 to 300 ms.
Tablets: 400 to 450 ms.
Example 02

10. Duration and Speed of
the Animation
Web: 150 to 200 ms.
Since we are accustomed to an almost instant
opening of web-pages in a browser, we expect to
transit between different states quickly as well.
Example 02

11. Important
No Bouncing, No Blur.
It distracts attention.
Example 03

12. List Items
(news cards, lists...)
Each occurrence: 20 to 25 ms.
Example 04

13. Linear Motion
When an object does not change its
position: Constant speed.
Example 05

14. When Changing Position:
Easing
With Acceleration or Deceleration.

15. Ease-Out
Deceleration Curve
When the element emerges on the
screen.
Example 06

16. Ease-In
Acceleration Curve
When the objects fly out of the
screen.
Example 07

17. There are
More rules...
Take a look:
http://bit.ly/AnimationInUX

18. About
AnimeJS
Web: https://animejs.com/
Take a look of Examples (Footer)

19. My
Examples
https://codepen.io/gabrielizalo/pen/qgWYOz

20. Thank you.