In this Hasty Treat, Scott and Wes talk about Framer Motion — why it is so cool, and how it can improve animations in your projects.

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It's an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.

Show Notes

4:53 - The 411

Previous knowns as Pop Motion Pose

Animation library with focus on ease of use

Utilizes both spring and duration based animations

7:19 - Pose

Pose was previously more pose based - aka you made scenes and toggled between them

This still exists within Motion as variants, but isn't the main way

8:06 - The New New

motion.div animate prop is basically a live value for the animation initial for initial state exit for animating out with use of animatePresence

Hard stuff made easy drag prop

Full control over properties like duration and easing

Orchestration features, this then that

Variants Multiple scenes allow you to orchestrate many animations with a single state change

Handles hover and tap easily

Scroll values

SVG path animations

19:45 - Final Thoughts

Framer Motion is easier

React Spring is much smaller

React Spring makes very complex animation possible

Tweet us your tasty treats!