Animation Toolset

The reference video

• https://youtu.be/wc8ovZZ78SY?t=755

Correct Tools for the Job

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