Playing: 223: Hasty Treat - Get Movin' With Framer Motion
0:00
LOUDNESS
Episode 574
|Feb 10th, 2023
Supper Club Γ Qwik framework from MiΕ‘ko Hevery, the Creator of Angular
Episode 393
|Oct 4th, 2021
Hasty Treat - Spicy Takeout - PHP Is Good and Weβre Just Re-Creating It
Feb 17th, 2020
Hasty Treat - Get Movin' With Framer Motion
π Download ShowβοΈ Edit Show NotesIn 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!
- Scott's Instagram
- LevelUpTutorials Instagram
- Wes' Instagram
- Wes' Twitter
- Wes' Facebook
- Scott's Twitter
- Make sure to include @SyntaxFM in your tweets