스프링 및 사용자 지정 타이밍 곡선

How an animation accelerates and settles shapes its personality. The timing curve decides whether motion feels snappy, smooth, or bouncy.

A linear curve moves at one steady speed start to finish. It can feel mechanical, so it suits progress bars more than UI.

The easeInOut curve starts slow, speeds up, then slows to a gentle stop, the most natural choice for most UI.

Use easeIn to start gently and easeOut to stop gently, picking which end of the motion feels softer.

A spring animation models real physics, overshooting slightly and settling, which feels lively and responsive.

The bounce parameter sets how springy the motion is. Zero is smooth; higher values add a playful overshoot.

Springs can also be tuned with response for speed and damping for how quickly the bounce dies out.

For full control, timingCurve lets you define a custom bezier with your own control points and duration.

Chain .delay onto any animation to wait before it begins, perfect for staggering several elements.

Use repeatForever or repeatCount to loop an animation, ideal for pulsing dots and loading hints.

The .speed modifier scales an animation faster or slower without rewriting its curve or duration.

Which curve gives the most natural everyday UI motion?

You explored timing curves from linear to easeInOut, lively springs with bounce, custom beziers, delays, and repeats. Now your motion has personality. 🚀