Hasty Treat - Get Movin' With Framer Motion
Syntax - Tasty Web Development Treats
English - February 17, 2020 14:00 - 23 minutes - 25.4 MB - ★★★★★ - 935 ratingsTechnology News Tech News css html html5 javascript webdevelopment Homepage Download Apple Podcasts Google Podcasts Overcast Castro Pocket Casts RSS feed
Previous Episode: Are Web Dev GUIs Going to Replace Us?
Next Episode: Serverless / Cloud Functions - Part 1
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 - SponsorLogRocket 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 Notes4:53 - The 411
Previous knowns as Pop Motion Pose Animation library with focus on ease of use Utilizes both spring and duration based animations7: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 way8: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 animations19: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