13

Hasty Treat - Get Movin' With Framer Motion

 3 years ago
source link: https://syntax.fm/show/223/hasty-treat-get-movin-with-framer-motion
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Feb 17th, 2020

Hasty Treat - Get Movin' With Framer Motion

👇 Download Show✏️ Edit Show Notes

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!


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK