DEV Community

Syntax - Tasty Web Development Treats

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 Tweet us your tasty treats!

Episode source