Hasty Treat - Get Movin' With Framer Motion
Syntax - Tasty Web Development Treats
Wes Bos
4.9 • 1.1K Ratings
🗓️ 17 February 2020
⏱️ 24 minutes
🧾️ Download transcript
Summary
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!
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Transcript
Click on a timestamp to play from that location
| 0:00.0 | Monday, Monday, Monday, |
| 0:02.0 | Open wide Dev fans. |
| 0:04.0 | Get ready to stuff your face |
| 0:06.0 | with JavaScript, CSS, node modules, barbecue tips, |
| 0:09.0 | get workflows, |
| 0:10.0 | break dancing, soft skills, web development, |
| 0:12.0 | the hastiest, the craziest, the craziest development the hastiest the craziest the tastiest web development treats coming in hot here is |
| 0:18.1 | Wes Barracuda bars and Scott El Torlocho Tolinsky. |
| 0:25.0 | Oh, welcome to syntax on this Monday hasty treat. |
| 0:32.0 | We're going to get moving with |
| 0:34.0 | a framer motion. We're going to be talking a little bit about this |
| 0:37.6 | library and why it is so cool and one of these libraries that you're going to |
| 0:42.3 | want to check out at least give a try and just |
| 0:45.8 | see how it can improve your understanding of animations within your react code. |
| 0:51.6 | My name is Scott Tolinsky. I am a developer from Denver, Colorado and with me as always is the |
| 0:57.8 | U.S. Boss. Hey everybody. Hey everybody, I'm gonna start one time just by saying hey everybody |
| 1:05.0 | Hey everybody everybody this episode is a sponsored by log rocket that's L-O-G-R-O-C-K-E-T dot com. |
| 1:16.4 | And you're gonna wanna check out Log Rocket |
| 1:18.4 | because it is the coolest service |
| 1:20.7 | to really understand how the bugs that are happening in your code are |
| 1:24.4 | actually happening. Their tagline is a stop guessing why bugs happen and |
| 1:29.2 | really that describes them so well because what Log Rocket does is it gives you a session replay |
... |
Please login to see the full transcript.
Disclaimer: The podcast and artwork embedded on this page are from Wes Bos, and are the property of its owner and not affiliated with or endorsed by Tapesearch.
Generated transcripts are the property of Wes Bos and are distributed freely under the Fair Use doctrine. Transcripts generated by Tapesearch are not guaranteed to be accurate.
Copyright © Tapesearch 2025.