Day 3/365 of Framer Animations

Today I'll talk about easing: the transitions between states when changing movement, colors, variants, and more.

I included a video showing the differences between them, plus an old After Effects animation that demonstrates a Bézier curve. The match starts slow, speeds up in the middle, then slows down again. Once you learn to see that rhythm, you can recreate it anywhere.

Linear Constant speed from start to finish. Predictable and robotic. Best for infinite loops, progress bars, and loading screens.

Ease In Starts slow and accelerates. Adds weight, making it great for large elements leaving the screen, such as drawers and modals. Avoid it for entrances.

Ease Out Starts fast and slows down smoothly. Perfect for buttons, cards, and elements entering the screen. Usually not ideal for exits.

Ease In Out Starts slow, speeds up in the middle, and slows down at the end. Feels natural because it mimics human movement. My favorite for mobile navigation menus.

Spring You control duration and overshoot. Great for micro-interactions like toggles, checkmarks, and playful UI elements.

Spring Physics You don't control duration, only the physics: • Stiffness = spring tension • Damping = bounce resistance • Mass = weight/inertia

Perfect for drag-and-drop, swipes, and gesture-based interactions.

Back In Moves backward before moving forward. Creates anticipation, like someone crouching before a jump. Great for exits.

Back Out Overshoots the destination before settling. Feels elastic, organic, and lively.

Back In Out Combines anticipation and overshoot. Used carefully on icons and UI elements, it adds personality and helps your brand stand out.

The "Back" transitions are some of the easiest ways to make motion feel unique rather than generic.

I wanted to explain it in more detail, but I've run out of space in this post. So if you still have any questions, feel free to ask them in the comments!

Day 3/365 of Framer Animations

Today I'll talk about easing: the transitions between states when changing movement, colors, variants, and more.

I included a video showing the differences between them, plus an old After Effects animation that demonstrates a Bézier curve. The match starts slow, speeds up in the middle, then slows down again. Once you learn to see that rhythm, you can recreate it anywhere.

Linear Constant speed from start to finish. Predictable and robotic. Best for infinite loops, progress bars, and loading screens.

Ease In Starts slow and accelerates. Adds weight, making it great for large elements leaving the screen, such as drawers and modals. Avoid it for entrances.

Ease Out Starts fast and slows down smoothly. Perfect for buttons, cards, and elements entering the screen. Usually not ideal for exits.

Ease In Out Starts slow, speeds up in the middle, and slows down at the end. Feels natural because it mimics human movement. My favorite for mobile navigation menus.

Spring You control duration and overshoot. Great for micro-interactions like toggles, checkmarks, and playful UI elements.

Spring Physics You don't control duration, only the physics: • Stiffness = spring tension • Damping = bounce resistance • Mass = weight/inertia

Perfect for drag-and-drop, swipes, and gesture-based interactions.

Back In Moves backward before moving forward. Creates anticipation, like someone crouching before a jump. Great for exits.

Back Out Overshoots the destination before settling. Feels elastic, organic, and lively.

Back In Out Combines anticipation and overshoot. Used carefully on icons and UI elements, it adds personality and helps your brand stand out.

The "Back" transitions are some of the easiest ways to make motion feel unique rather than generic.

I wanted to explain it in more detail, but I've run out of space in this post. So if you still have any questions, feel free to ask them in the comments!