🎬

Animation Timeline Builder

Visual timeline editor for GSAP and Framer Motion. Scrub through animations, adjust easing curves.

📊

Timeline

Master the timeline: keyframes, scrubbing, and multi-property tracks.

📈

Easing

Understand easing curves and how they affect animation feel.

🎯

Keyframes

Create and manipulate keyframes to control animation flow.

Mode:

💡 Quick Start

1. Try a preset below to see a working animation

2. Select a property and click the timeline to set playhead

3. Add keyframes and drag them to adjust timing

4. Click Play to see your animation!

Quick Start Presets(Click to load)

Properties

Current Property

👁️Opacity

Range: 0 to 1

3 keyframes for this property

Animation Settings

Duration: 1s

0.1s5s

Easing

Slow start and end

Delay: 0s

Repeat: 0x

Snap to grid (5% increments)

Keyframes

3 for Opacity

opacity at 0%

0.0

opacity at 50%

1.0

opacity at 100%

1.0

Multi-Property Timeline

Playhead: 0%

👁️ Opacity

↔️ X Position

↕️ Y Position

🔍 Scale

🔄 Rotation

Live Preview

opacity: 0.00

Opacity

0.00

X Position

0px

Y Position

0px

Scale

1.00x

Rotation

0°

Think like an animator: What emotion does this motion convey?

💡 Tip: The grid helps visualize position changes. The purple dot marks the center (0,0). Watch the values above change as you scrub!

Export Code

Framer Motion

<motion.div
  animate={{
    opacity: 1,
  }}
  transition={{
    duration: 1, // Total animation duration
    ease: "easeInOut", // Easing function
  }}
>