Animation Toolset
The reference video
CSS / SCSS
- small sequences and simple interactions
- once you get more than 3 sequences of interactions (animating between different transitions)...
GSAP (Greensock)
- great for sequencing and complex movement
- cross browser consistency
- theres a lot of strange browser bugs in svg animation
- timed animation (imperative)
React Motion
- great for single movements that you'd like to look realistic
- giving something mass and physics and sending it on its way
Framer Motion (2019) for react
- personal preference (Li Qun)
- declarative
- tell it what you want it to be at different states in your app (e.g. isModal ? "expand" : "normal")
- incremental
- build out your app first, then add
motion. in front of your elements and add animation