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