Hasty Treat - Get Movin' With Framer Motion

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 Framer Motion

React Spring

Framer Motion Examples

Framer X

Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Make sure to include @SyntaxFM in your tweets