Easing functions specify the speed of animation to make the movement more natural. Real objects don’t just move at a constant speed, and do not start and stop in an instant. This page helps you choose the right easing function.
Bezier Customizer, a tool from Whimsical Animations
Create the perfect easing curve with this helpful tool!
Bezier Curve as Easing Function In C++
It’s been a while since my last guest post on Adam’s blog, but I’m back with something short and practical—think of it as an epilogue to this earlier post on Bézier curves in animation. The last post focused on the theory and mathematics behind Bézier curves. What it lacked was a practical perspective—an opportunity to see the implementation in action. I wanted to share with you a simple library that I have created. Its purpose is to directly represent cubic Bézier Curves as Easing Functions.
Easings - Generate, test and share custom easing curves.
Test common easing curves on a range of interfaces. Or generate and share your own cubic-bezier curves.
AutoAnimate - Add motion to your apps with a single line of code
A zero-config, drop-in animation utility that automatically adds smooth transitions to your web app. Use it with React, Solid, Vue, Svelte, or any other JavaScript application.
Real-time Motion Retargeting to Highly Varied User-Created Morphologies - Chris Hecker's Website
Chris Hecker[1] Bernd Raabe[2] Ryan W. Enslow[3]John DeWeese[4] Jordan Maynard[5] Kees van Prooijen[6]
kurvenlineal — scale fitter
kurvenlineal is a bezier easing run in reverse. Normally you start with a cubic-bezier() and sample values from it, in this case you start with the values: hand it a list of numbers and it finds the quadratic or cubic easing (endpoints fixed at 0,0 → 1,1) that stays as close as possible to all of them (a least-squares fit).
The Accelerationist Case for Frontier Pacing
Slow AI is smooth AI, smooth AI is fast AI
animations.dev
Learn the theory and practice behind great animations with this interactive learning experience.
The Web Animation Performance Tier List, Motion Magazine
Learn what makes web animations fast, slow, and everything in between with our 2025 web animation performance tier list.
Whimsical Animations
Learn how to create charming interactions and delightful touches using the magic of CSS, JavaScript, SVG, and Canvas. I’m sharing all my tricks in this one!
Relativity Park: Walking Speed of Light
Special relativity simulator in which light crawls along at a human speed, so Lorentz contraction, aberration and Doppler shift happen at walking pace.
The physics behind spring animations - The Blog of Maxime Heckel
A deep dive into the inner workings of spring animations in Framer Motion.
Svelte-Motion
An animation library for Svelte apps based on Framer Motion.
Animating the 6 Basic Emotions: Acting Tips from Pro Animators | Animation Mentor
Get animation tips from our blog series on Animating the 6 Basic Emotions. Polish your demo reel with advice from professional animators!
How Figma put the bounce in spring animations | Figma Blog
The physics behind spring animations
