Часто разработчики сталкиваются с проблемой непонимания того, какие средства использовать при разработке анимации во фронтенде, забывая при этом о том, что за нас уже загнули все пальцы. Наша задача — попросту использовать то, что уже написано другими. Денис Бурячковский рассказывает о том, что команда ангуляра привнесла в ряды фронтенд комьюнити для облегчения работы со всевозможными интерактивными фишками.

1. Highway to FPS or true
animations in Angular

2. What is animation?

3. Do something with a box
to make it alive!

5. Frame 1 Frame 29
Frame 58 Frame 87

6. Why is it so smooth?

7. 60 FPS
24 FPS
One
second

8. Current realities

9. ● 30 FPS - Console and arcade
games
● 60 FPS - More complicated
games
● 120 - 240 FPS - ARE U A PRO?

10. Performance LI(EA)CK(K)

11. https://googlechrome.github.io/devtools-samples/jank/

17. Ways to improve

18. FLIP

19. SAFE CSS

21. https://csstriggers.com

22. Layers

26. Transitions

27. Keyframes

29. Angular

33. Common transitions

36. Reusable animations

38. State change expressions
:enter/:leave/:increment/
:decrement

40. Router animations

42. Be a good front end :)