Easing Functions

What Are Easing Functions?

Easing functions define how an animation progresses over time. Instead of moving at a constant speed (linear), easing adds acceleration, deceleration, or bounce effects that make animations feel more natural.

Available Easings

FriskyMouse supports 31 easing options grouped by their motion behavior:

Linear

Constant speed throughout. Simple and predictable.

Name
Linear

Ease In

The animation starts slowly and accelerates. Good for subtle entrances.

Name
Cubic Ease In
Quadratic Ease In
Quartic Ease In
Quintic Ease In
Sine Ease In
Circular Ease In
Exponential Ease In
Back Ease In

Ease Out

The animation starts fast and decelerates. The most natural-feeling option for ripple effects.

Name
Cubic Ease Out
Quadratic Ease Out
Quartic Ease Out
Quintic Ease Out
Sine Ease Out
Circular Ease Out
Exponential Ease Out
Back Ease Out

Ease In-Out

Combines both: slow start, fast middle, slow end. Smooth and polished.

Name
Cubic Ease In-Out
Quadratic Ease In-Out
Quartic Ease In-Out
Quintic Ease In-Out
Sine Ease In-Out
Circular Ease In-Out
Exponential Ease In-Out
Back Ease In-Out

Bounce

The animation overshoots and bounces back. Eye-catching for click feedback.

Name
Bounce Ease In
Bounce Ease Out
Bounce Ease In-Out

Elastic

Spring-like overshoot with oscillation. Expressive but use sparingly in professional settings.

Name
Elastic Ease In
Elastic Ease Out
Elastic Ease In-Out

Recommendations

Context	Recommended Easing
Presentations	Ease Out
Training videos	Ease In-Out
Creative / fun	Bounce or Elastic
Minimal / technical	Linear

The easing function applies to all properties of the animation (size, opacity, and position), creating a cohesive motion feel.