DesignSystems.One Logodesignsystems.one
FoundationsDesign SystemsFrameworksDesignOpsTools

DesignSystems.One © 2025

Contact

Duration & Easing

Animation timing and easing functions are essential for creating natural and pleasing motion. This guide demonstrates how different durations and easing curves affect animations in your design system.

Animation Playground

Duration

Easing Function

linear
easeIn
easeOut
easeInOut
easeInBack
easeOutBack
easeInOutBack

Preview

Duration: 300ms • Easing: easeInOut

Real-World Examples

See how different combinations of duration and easing create different effects in common UI patterns.

Button Hover
Quick response for immediate feedback
Modal Entrance
Modal Content
Slight overshoot creates attention-grabbing entrance
Page Transition
Page Content
Smooth acceleration and deceleration for major transitions