Easing - Basics

Easing functions control the rate of change during an animation, making movements feel more natural and engaging. Master these five standard easings for 90% of your animation needs.

Standard Easings

The five essential easings that cover most animation needs.

linear

Constant speed from start to finish - no acceleration or deceleration.

FasterMotion.dom({
  target: '.box',
  to: { x: 100 },
  duration: 1000,
  ease: 'linear'
});

Use case: Loading bars, progress indicators, constant rotation (spinners)

ease

Slight acceleration and deceleration - the balanced default.

FasterMotion.dom({
  target: '.box',
  to: { x: 100 },
  duration: 1000,
  ease: 'ease'
});

Use case: General purpose animations, default choice when unsure

ease-in

Slow start, fast finish - accelerates into exit.

FasterMotion.dom({
  target: '.box',
  to: { x: 100 },
  duration: 1000,
  ease: 'ease-in'
});

Use case: Elements leaving the screen, fade outs, dismissals

ease-out

Fast start, slow finish - decelerates into entrance.

FasterMotion.dom({
  target: '.box',
  to: { x: 100 },
  duration: 1000,
  ease: 'ease-out'
});

Use case: Elements entering the screen (most common), dropdowns, modals

ease-in-out

Slow start and finish, fast middle - smooth transitions.

FasterMotion.dom({
  target: '.box',
  to: { x: 100 },
  duration: 1000,
  ease: 'ease-in-out'
});

Use case: Page transitions, state changes, sliding panels

Try it: Standard Easings Comparison

// Compare all 5 standard easings side-by-side
FasterMotion.dom({
  target: '#ball-linear',
  to: { x: 400 },
  duration: 1500,
  ease: 'linear'
});

FasterMotion.dom({
  target: '#ball-ease-out',
  to: { x: 400 },
  duration: 1500,
  ease: 'ease-out'
});

Common Use Cases

Real-world examples showing which easing to use for common UI patterns.

Button Click

Quick feedback with ease-out for natural feel.

FasterMotion.dom({
  target: 'button',
  to: { scale: 0.95 },
  duration: 100,
  ease: 'ease-out'
});

Try it: Button Click

// On click: scale down then back up
button.addEventListener('click', () => {
  FasterMotion.dom({
    target: button,
    to: { scale: 0.95 },
    duration: 100,
    ease: 'ease-out'
  });
});

Smooth entrance with ease-out for professional feel.

FasterMotion.dom({
  target: '.modal',
  from: { opacity: 0, scale: 0.9 },
  duration: 300,
  ease: 'ease-out'
});

Try it: Modal Open

FasterMotion.dom({
  target: '.modal',
  from: { opacity: 0, scale: 0.9 },
  to: { opacity: 1, scale: 1 },
  duration: 400,
  ease: 'back.out'  // Slight overshoot for attention
});

Quick reveal with ease-out for snappy feel.

FasterMotion.dom({
  target: '.dropdown',
  from: { opacity: 0, y: -20 },
  duration: 300,
  ease: 'ease-out'
});

Page Transition

Smooth crossfade with ease-in-out for balanced motion.

FasterMotion.dom({
  target: '.page',
  to: { x: '-100%' },
  duration: 500,
  ease: 'ease-in-out'
});

Loading Spinner

Constant rotation with linear for mechanical feel.

FasterMotion.dom({
  target: '.spinner',
  to: { rotation: 360 },
  duration: 1000,
  ease: 'linear',
  repeat: -1
});

Quick Reference

Easing	Feel	Best For
`linear`	Constant	Progress bars, spinners
`ease`	Balanced	General purpose (default)
`ease-out`	Natural entrance	UI entrances, dropdowns, modals
`ease-in`	Accelerating exit	UI exits, dismissals
`ease-in-out`	Smooth transition	Page transitions, state changes

Duration Guidelines

Choose appropriate durations for each easing:

// Fast interactions (100-200ms)
FasterMotion.dom({
  target: 'button',
  to: { scale: 0.95 },
  duration: 100,
  ease: 'ease-out'
});

// Standard animations (300-500ms)
FasterMotion.dom({
  target: '.modal',
  from: { opacity: 0, scale: 0.9 },
  duration: 300,
  ease: 'ease-out'
});

// Smooth transitions (500-800ms)
FasterMotion.dom({
  target: '.page',
  to: { x: '-100%' },
  duration: 500,
  ease: 'ease-in-out'
});

When to Use Each Easing

Use `linear` when:

Constant speed is needed (progress bars, scrolling)
Simulating mechanical motion (spinners, clocks)
Continuous loops without jarring starts/stops

Use `ease-out` when:

Elements enter the screen (most common case)
Opening dropdowns, modals, tooltips
Hover effects and button interactions
Natural, snappy feel is desired

Use `ease-in` when:

Elements exit the screen
Dismissing modals, notifications
Fading out or hiding UI elements
Complementing ease-out entrance

Use `ease-in-out` when:

Transitioning between states
Sliding panels or carousels
Page transitions
Smooth, balanced motion is needed

Use `ease` when:

Unsure which to use (safe default)
General purpose animations
Subtle, professional feel

Best Practices

Start with ease-out

For 90% of UI animations, ease-out is the best choice:

FasterMotion.dom({
  target: '.element',
  to: { opacity: 1, y: 0 },
  duration: 400,
  ease: 'ease-out'  // Natural, responsive feel
});

Match entrance and exit easings

// Opening (ease-out)
FasterMotion.dom({
  target: '.modal',
  from: { opacity: 0, scale: 0.9 },
  duration: 300,
  ease: 'ease-out'
});

// Closing (ease-in)
FasterMotion.dom({
  target: '.modal',
  to: { opacity: 0, scale: 0.9 },
  duration: 200,
  ease: 'ease-in'
});

Keep it consistent

Define easing constants for your app:

const APP_EASING = {
  default: 'ease-out',
  transition: 'ease-in-out',
  exit: 'ease-in'
};

FasterMotion.dom({
  target: '.button',
  to: { scale: 1.05 },
  duration: 200,
  ease: APP_EASING.default
});

Advanced Easings

For specialized effects like overshoot, bounce, elastic, and spring animations, see:

Easing - Advanced Features - Specialized easing functions