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 - Sponsor

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

Links

Tweet us your tasty treats!

Hasty Treat - Get Movin' With Framer Motion

Syntax - Tasty Web Development Treats