Easing - Advanced Features

Advanced easing functions for creating dynamic, expressive animations with specialized curves and effects.

Curve Easings

Progressive curves from gentle (curve1) to aggressive (curve4). Each has in, out, and inOut variants.

curve1 - Gentle

Subtle acceleration/deceleration, slightly more pronounced than standard ease.

FasterMotion.dom({
  target: '.box',
  to: { x: 200 },
  duration: 800,
  ease: 'curve1.out'  // Most common
});

Use case: Subtle professional UI, enterprise apps

curve2 - Moderate

Balanced curve with noticeable acceleration.

FasterMotion.dom({
  target: '.box',
  to: { x: 200 },
  duration: 800,
  ease: 'curve2.out'
});

Use case: General purpose animations, modern UIs

curve3 - Strong

Pronounced acceleration, energetic movement.

FasterMotion.dom({
  target: '.box',
  to: { x: 200 },
  duration: 800,
  ease: 'curve3.out'
});

Use case: Dynamic interfaces, gaming UIs

curve4 - Aggressive

Maximum acceleration, very dramatic.

FasterMotion.dom({
  target: '.box',
  to: { x: 200 },
  duration: 800,
  ease: 'curve4.out'
});

Use case: High-energy animations, attention-grabbing

Try it: Curve Comparison

// Compare curve easings
FasterMotion.dom({
  target: '#ball1',
  to: { x: 400 },
  duration: 1500,
  ease: 'curve1.out'
});

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

Back Easings

Overshoot the target value before settling, creating anticipation and attention-grabbing effects.

back.in

Backs up before moving forward, creating anticipation.

FasterMotion.dom({
  target: '.box',
  to: { x: 200 },
  duration: 600,
  ease: 'back.in'
});

Use case: Exit animations, emphasized departures

back.out

Overshoots target then settles back.

FasterMotion.dom({
  target: '.box',
  to: { x: 200 },
  duration: 600,
  ease: 'back.out'
});

Use case: Button clicks, attention-grabbing entrances, playful UI

back.inOut

Backs up at start, overshoots at end.

FasterMotion.dom({
  target: '.box',
  to: { x: 200 },
  duration: 800,
  ease: 'back.inOut'
});

Use case: Playful transitions, game elements

Try it: Back Easings

// Back.out for attention-grabbing entrance
FasterMotion.dom({
  target: '#button',
  to: { scale: 1.1 },
  duration: 600,
  ease: 'back.out'
});

Elastic Easings

Bouncing effect like a rubber band or spring, creating highly dynamic movements.

elastic.in

Oscillates before reaching start position.

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

Use case: Playful exits, retracting elements

elastic.out

Overshoots and oscillates before settling.

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

Use case: Notifications, alerts, playful entrances

elastic.inOut

Oscillates at both start and end.

FasterMotion.dom({
  target: '.box',
  to: { x: 200 },
  duration: 1200,
  ease: 'elastic.inOut'
});

Use case: Highly playful interactions, game UIs

Try it: Elastic Easings

// Elastic.out for notification
FasterMotion.dom({
  target: '.notification',
  to: { x: 0 },
  from: { x: 300 },
  duration: 1000,
  ease: 'elastic.out'
});

Bounce Easings

Bouncing ball effect, simulating physical bounce behavior.

bounce.in

Bounces before reaching start (reverse landing).

FasterMotion.dom({
  target: '.box',
  to: { y: 200 },
  duration: 1000,
  ease: 'bounce.in'
});

Use case: Objects rising, reverse gravity

bounce.out

Bounces when reaching target (like ball landing).

FasterMotion.dom({
  target: '.box',
  to: { y: 200 },
  duration: 1000,
  ease: 'bounce.out'
});

Use case: Falling objects, landing animations

bounce.inOut

Bounces at both start and end.

FasterMotion.dom({
  target: '.box',
  to: { y: 200 },
  duration: 1200,
  ease: 'bounce.inOut'
});

Use case: Bouncing effects, playful movements

Try it: Bounce Easings

// Bounce.out for landing effect
FasterMotion.dom({
  target: '#ball',
  to: { y: 200 },
  duration: 1000,
  ease: 'bounce.out'
});

Spring Easings

Physics-based spring motion with different stiffness and damping characteristics.

spring.bouncy

High energy spring with more bounce.

FasterMotion.dom({
  target: '.box',
  to: { scale: 1.2 },
  duration: 800,
  ease: 'spring.bouncy'
});

Use case: Playful UI, game elements, energetic interactions

spring.smooth

Balanced spring motion, natural feeling.

FasterMotion.dom({
  target: '.box',
  to: { scale: 1.2 },
  duration: 800,
  ease: 'spring.smooth'
});

Use case: Natural UI transitions, modern interfaces (recommended)

spring.wobbly

More oscillation, jello-like movement.

FasterMotion.dom({
  target: '.box',
  to: { scale: 1.2 },
  duration: 800,
  ease: 'spring.wobbly'
});

Use case: Jello effects, exaggerated reactions

Try it: Spring Easings

// Spring.smooth for natural UI
FasterMotion.dom({
  target: '#card',
  to: { scale: 1.1, y: -10 },
  duration: 800,
  ease: 'spring.smooth'
});

Custom Bezier Curves

Create custom easing curves using cubic-bezier function with precise control points.

Syntax

FasterMotion.dom({
  target: '.box',
  to: { x: 200 },
  duration: 600,
  ease: 'cubic-bezier(x1, y1, x2, y2)'
});

Common Custom Curves

// Material Design Standard
ease: 'cubic-bezier(0.4, 0, 0.2, 1)'

// iOS Ease Out
ease: 'cubic-bezier(0.25, 0.1, 0.25, 1)'

// Expo Ease Out (dramatic deceleration)
ease: 'cubic-bezier(0.19, 1, 0.22, 1)'

// Circ Ease Out (circular curve)
ease: 'cubic-bezier(0, 0.55, 0.45, 1)'

// Quint Ease Out (powerful deceleration)
ease: 'cubic-bezier(0.23, 1, 0.32, 1)'

Try it: Custom Bezier

// Material Design curve
FasterMotion.dom({
  target: '#box',
  to: { x: 400 },
  duration: 1200,
  ease: 'cubic-bezier(0.4, 0, 0.2, 1)'
});

Special Easings

Additional mathematical easing functions for specialized effects.

Sine Easings

Smooth sinusoidal curves.

// Gentle acceleration
ease: 'sine.in'

// Gentle deceleration
ease: 'sine.out'

// Gentle both ways
ease: 'sine.inOut'

Expo Easings

Exponential curves with dramatic acceleration/deceleration.

// Dramatic acceleration
ease: 'expo.in'

// Dramatic deceleration
ease: 'expo.out'

// Dramatic both ways
ease: 'expo.inOut'

Circ Easings

Circular curves for smooth arcs.

// Circular acceleration
ease: 'circ.in'

// Circular deceleration
ease: 'circ.out'

// Circular both ways
ease: 'circ.inOut'

Visual Comparison

Try it: Easing Visualizer

// Compare any two easings side-by-side
FasterMotion.dom({
  target: '#ball1',
  to: { x: 400 },
  duration: 1500,
  ease: 'ease-out'
});

FasterMotion.dom({
  target: '#ball2',
  to: { x: 400 },
  duration: 1500,
  ease: 'spring.smooth'
});

Best Practices

Match Easing to Brand Identity

// Corporate/Professional
const CORPORATE_EASINGS = {
  enter: 'ease-out',
  exit: 'ease-in',
  transition: 'ease-in-out'
};

// Playful/Gaming
const PLAYFUL_EASINGS = {
  enter: 'back.out',
  exit: 'back.in',
  bounce: 'elastic.out'
};

// Natural/Organic
const NATURAL_EASINGS = {
  all: 'spring.smooth'
};

Consistency Across Application

// Define easing constants
const APP_EASING = {
  quick: 'ease-out',        // 200-400ms
  normal: 'curve2.out',     // 400-800ms
  slow: 'spring.smooth',    // 800-1200ms
  bounce: 'back.out',       // Special effects
  notification: 'elastic.out' // Alerts
};

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

Duration + Easing Pairing

// Fast animations (200-400ms)
duration: 300,
ease: 'ease-out'  // ✓ Good

// Medium animations (400-800ms)
duration: 600,
ease: 'back.out'  // ✓ Good

// Slow animations (800-1500ms)
duration: 1000,
ease: 'spring.smooth'  // ✓ Good

// AVOID
duration: 2000,
ease: 'elastic.out'  // ✗ Too bouncy for long duration

Common Mistakes

Avoid

// Too dramatic for subtle UI
FasterMotion.dom({
  target: '.button',
  to: { scale: 1.05 },
  duration: 200,
  ease: 'elastic.out'  // ✗ Too bouncy
});

// Wrong direction for exit
FasterMotion.dom({
  target: '.modal',
  to: { opacity: 0 },
  duration: 300,
  ease: 'ease-out'  // ✗ Should be ease-in
});

// Too slow for bounce
FasterMotion.dom({
  target: '.box',
  to: { y: 200 },
  duration: 2500,
  ease: 'bounce.out'  // ✗ Too long
});

Better

// Appropriate for subtle UI
FasterMotion.dom({
  target: '.button',
  to: { scale: 1.05 },
  duration: 200,
  ease: 'ease-out'  // ✓ Professional
});

// Correct for exit
FasterMotion.dom({
  target: '.modal',
  to: { opacity: 0 },
  duration: 300,
  ease: 'ease-in'  // ✓ Natural exit
});

// Appropriate duration
FasterMotion.dom({
  target: '.box',
  to: { y: 200 },
  duration: 1000,
  ease: 'bounce.out'  // ✓ Good pairing
});

Performance Considerations

// Efficient: Use same easing for similar elements
const cards = document.querySelectorAll('.card');
cards.forEach((card, i) => {
  FasterMotion.dom({
    target: card,
    to: { opacity: 1, y: 0 },
    duration: 600,
    ease: 'curve2.out',  // Same easing
    delay: i * 100
  });
});

// Less efficient: Different complex easings
cards.forEach((card, i) => {
  FasterMotion.dom({
    target: card,
    to: { opacity: 1, y: 0 },
    duration: 600,
    ease: i % 2 ? 'elastic.out' : 'bounce.out'  // Avoid mixing
  });
});