Hasty Treat - Get Movin' With Framer Motion

Syntax - Tasty Web Development Treats

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