✳flâneur — a map of the web's best reading

The Easing Blueprint

animations.dev · 1,450 words · saved by 4 readers

The main ingredient that influences how our animations feel is easing. It describes the rate at which something changes over a period of time. It’s the most important part of any animation. It can make a bad animation look great, and a great animation look bad. You can animate the timeline component below with two different easings. Notice how much worse it feels with the incorrect one. Keep in mind this is just easing that’s changing. Easing also plays an important role in how fast our interfaces feel. This is important, because the perception of speed is often times more important than the actual performance of your app. A faster-spinning spinner makes the app seem to load faster, even when the load times are identical. This improves perceived performance. Which one works harder to load the data? This example focuses on duration, but easing can also influence the perception of speed. The dropdown on the left below uses ease-in easing, which starts slow. The one on the right uses ea

The Easing Blueprint Fundamentals Walkthroughs Module 0 1 Animation Theory Intro What makes an animation feel right The Easing Blueprint Spring animations Timing and purpose Taste Train your judgement New Animations and AI Practical Animation Tips Module 0 2 CSS animations The beauty of CSS animations Transforms Transitions Keyframe Animations The Magic of Clip Path Module 0 3 Framer Motion Why Framer Motion The Basics How do I code animations Feedback popover Multi-step component Trash interaction Hooks and animations Interactive graph Animating in public Module 0 4 Good vs Great animations T

Explore this link on the map →

saved by

related reading