Framer Update, Animations

Framer Update: Time-Based Springs

Benjamin

2:14

6.7K views

Sep 11, 2024

About this lesson

In this update we’re introducing a new, simplified default for spring transitions in Framer. With time-based springs, you only need two properties to design amazing looking transitions: Time and Bounce. By getting control over duration, springs become much easier to mix with easing transitions, and much easier to use in animation sequences. Looking for ultimate control? The physics-based springs are just 1 click away. We think you’ll love these new animation options. https://framer.com/updates/time-based-springs

🌞 Start for free: https://framer.link/yt

📚 Learn more at: https://framer.link/yt-academy

💎 Join the Community: https://framer.link/yt-community

🎉 Follow on X: https://framer.link/yt-x

0:00yo my name is Benjamin and this is time 0:04based Springs in framer we generally 0:08have two types of transitions in framer 0:11ease and spring these easing transitions 0:14use easing 0:16functions like linear ease in ease in 0:20out ease out and more and they allow you 0:23to set a specific time framer also has 0:27spring transitions so let's have a look 0:29at those now if you have used 0:32transitions in framer before you might 0:35be familiar with these properties like 0:37stiffness damping and mass these are 0:41spring curves based on physics while 0:45very flexible these don't allow you to 0:48set a specific time making them harder 0:51to mix with ease transitions as well as 0:54harder to sequence in 0:57variants that's why we're adding time 1:00based Springs to framer these have a 1:03simpler set of properties we have a Time 1:07control just like we get in the ease 1:10Transitions and a bounce control that 1:13simply defines the bounciness of our 1:16animation so let's go ahead and give our 1:18time based spring a preview as you can 1:22see this allows us to use spring 1:24animations that end at the exact same 1:27time as our East animation 1:30plus you can see how much more natural 1:33the spring transition really feels in 1:35direct comparison to get a better 1:39understanding of the bounce property 1:41I've added three rows here each with a 1:44unique value so let's jump back to the 1:48preview to give these a comparison and 1:51you'll notice that the higher the bounce 1:53value the farther our animation 1:57overshoots that's it for this video 2:00thank you so much for watching and stay 2:03tuned for more updates coming soon

TeachesTransitions & Easing

Also coversComponent Variants

Watch on YouTube ↗

‹ Framer Update: Themed Favicons and Apple Touch Icon

Absolute Positioning in Framer (Fundamentals Lesson 5) ›