Skip to main content
The TimingDemo component provides a side-by-side comparison of different timing functions, allowing users to see how each affects animation progression.

​
Timing functions demonstrated

The component showcases five standard timing functions:

linear

Constant speed from start to finish

ease

Slow start, fast middle, slow end (default)

ease-in

Slow start, accelerates to end

ease-out

Fast start, decelerates to end

ease-in-out

Slow start and end, fast middle

​
Component implementation

const timingFunctions = [
  { name: 'linear', description: 'Constant speed throughout' },
  { name: 'ease', description: 'Slow start and end, fast middle' },
  { name: 'ease-in', description: 'Slow start, accelerates' },
  { name: 'ease-out', description: 'Fast start, decelerates' },
  { name: 'ease-in-out', description: 'Very smooth start and end' }
]
Each timing function is applied to an animated element that moves horizontally, making the differences clearly visible.

​
Interactive features

  • Play button - Triggers all animations simultaneously
  • Reset button - Returns elements to starting position
  • Visual comparison - Elements animate side-by-side for easy comparison
  • Labels - Each animated element shows its timing function name

​
Usage in the playground

import TimingDemo from './components/TimingDemo'

<section>
  <h2>Timing Functions</h2>
  <p>Explore how different timing functions affect the feel of animations.</p>
  <TimingDemo />
</section>

​
When to use each timing function

Best for continuous animations like loading spinners or progress indicators. Creates mechanical, consistent motion.
The default and most natural-feeling option. Good for general UI animations.
Great for elements exiting the screen or fading out. Creates an accelerating motion.
Perfect for elements entering the screen. Creates a decelerating, settling motion.
Ideal for animations that move elements from one position to another. Very smooth.
For more control, use cubic-bezier() to create custom timing functions. Tools like cubic-bezier.com help visualize custom curves.

Build docs developers (and LLMs) love

Get started for freeTalk to us