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

Release date

Lydbog: 17. februar 2020