Animation Timeline

The timeline is where your animations come to life. It's your animation conductor's podium - where you orchestrate timing, sequencing, and coordination of all your effects. Let's master it!

Timeline Overview

The timeline lives at the bottom of the screen and shows:

• When animations start and end
• How long they last
• Which layer they belong to
• Current playback position

Think of it like a music sequencer or video editor timeline - same concept!

Timeline Anatomy

┌─────────────────────────────────────────────────────────┐
│ ▶ ⏸ ⏹  [0──────1──────2──────3──────4──────5s]   📷    │
│         │                                                │
│ Logo    ░░░░░░░░                                        │
│ Item_1      ░░░░░░░░░░                                  │
│ Item_2          ░░░░░░░░░░                              │
│ Item_3              ░░░░░░░░░░                          │
│ BG      ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░  │
└─────────────────────────────────────────────────────────┘

Components:

1. Playback Controls (left side)

   • ▶ Play button
   • ⏸ Pause button
   • ⏹ Stop button

2. Time Ruler (top)

   • Shows seconds
   • Markers at regular intervals
   • Helps measure duration

3. Playhead (vertical line)

   • Shows current time position
   • Moves during playback
   • Drag to scrub through time

4. Layer Rows (left column)

   • One row per layer with animations
   • Only shows layers that have animations
   • Matches Layers tab order

5. Animation Blocks (colored rectangles)

   • Visual representation of animations
   • Width = duration
   • Position = start time
   • Color = animation type (usually)

6. Screenshot Button (📷, right side)

   • Appears during playback
   • Capture specific frames

Reading the Timeline

Time Scale

Understanding time:

• Horizontal axis = time in seconds
• Each block's width = animation duration
• Position from left = start time

Example reading:

Logo    ░░░░░░
         0s  1.5s

= Logo animation starts at 0s
= Lasts until 1.5s
= Duration: 1.5 seconds

Animation Blocks

What blocks tell you:

• Start position: When animation begins
• Width: How long it lasts
• Layer row: Which layer it affects
• Color/label: What type of animation

Multiple blocks per layer:

Logo    ░░Opacity░░░Rotation░░░Scale░░

= Three different animations on Logo
= They can overlap or run sequentially

Overlapping vs Sequential

Overlapping animations:

Logo    ░░░░Move░░░░░
        ░░░░Opacity░░░░

= Move and Opacity start at same time
= Run simultaneously
= Create combined effect

Sequential animations:

Logo    ░░Move░░
                ░░Scale░░

= Move finishes first
= Then Scale begins
= One after another

Staggered animations:

Item_1  ░░Bounce░░
Item_2      ░░Bounce░░
Item_3          ░░Bounce░░

= Same animation type
= Started at different times
= Creates wave/cascade effect

Timeline Controls

Playback

Play button (▶) / Spacebar:

• Starts animation preview
• Plays from current playhead position
• Press again to pause

Pause (⏸) / Spacebar:

• Pauses at current position
• Can resume from same spot

Stop (⏹):

• Stops playback
• Returns playhead to beginning (0s)
• Reset to start

Scrubbing:

• Drag playhead left/right
• Jump to specific time
• Preview specific moments
• Great for fine-tuning

Screenshot During Playback

The camera icon appears during playback:

• Click to capture current frame
• Saves screenshot
• Useful for specific animation moments
• Great for documentation

Working with Animation Blocks

Selecting Blocks

Click animation block:

• Block highlights
• Properties (right panel) shows settings
• Ready to edit

Visual feedback:

• Selected block changes appearance
• Often outlined or brightened
• Properties controls update in real-time

Moving Blocks (Timing)

Drag horizontally:

• Click and hold animation block
• Drag left (earlier) or right (later)
• Changes start time
• Doesn't change duration

Use cases:

• Adjust when animation starts
• Create delays without using Delay property
• Sync with other animations
• Build sequences

Snapping:

• Blocks may snap to grid
• Or snap to other animations
• Helps align timing
• Can usually be disabled (hold a key)

Adjusting Duration

Drag edges:

Left edge:

• Drag left = start earlier
• Drag right = start later
• Changes start time
• Affects overall duration

Right edge:

• Drag right = last longer
• Drag left = end sooner
• Changes end time
• Affects duration

Both edges:

• Adjust start and end independently
• Control exact timing
• Visual feedback in real-time

Visual representation:

Original:  ░░░░░░░░

Drag right edge →:  ░░░░░░░░░░░░
(longer duration)

Drag left edge ←:  ░░░░
(shorter duration)

Deleting Blocks

Three ways:

1. Delete key

   • Select block
   • Press Delete
   • Gone!

2. Properties (right panel)

   • May have delete button
   • Click to remove

3. Drag off timeline (if supported)

   • Drag block away from timeline
   • Release to delete

Undo works! Ctrl+Z if you delete by mistake.

Timeline Techniques

Creating Sequences

Build animations that play one after another:

Method 1: Manual positioning

1. Add first animation at 0s
2. Note its duration (e.g., 1.5s)
3. Add second animation at 1.5s
4. Note its duration (e.g., 1.0s)
5. Add third animation at 2.5s
6. Continue...

Method 2: Use Delay property

1. Add all animations at 0s
2. Set Delay on second animation (1.5s)
3. Set Delay on third animation (2.5s)
4. Timeline shows them sequentially

Both methods work! Choose what feels intuitive.

Creating Simultaneous Effects

Multiple animations at same time:

Same layer:

Logo    ░░Move░░
        ░░Fade░░
        ░░Scale░

= Three animations start together
= All at 0s on same layer
= Combined effect

Multiple layers:

Logo     ░░Entrance░░
BG       ░░FadeIn░░
Items    ░░Bounce░░

= Everything animates together
= Synchronized start
= Cohesive feel

Creating Waves/Cascades

Staggered timing for flow:

Consistent delays:

Item_1   ░░Bounce░░
Item_2        ░░Bounce░░
Item_3             ░░Bounce░░
Item_4                  ░░Bounce░░

Each starts 0.3s after previous
= Smooth cascade

Calculate delays:

• Item 1: Delay 0s
• Item 2: Delay 0.3s
• Item 3: Delay 0.6s
• Item 4: Delay 0.9s
• Pattern: Previous delay + 0.3s

Variable delays for organic feel:

Item_1   ░░░
Item_2       ░░░
Item_3            ░░░

Delays: 0s, 0.25s, 0.6s
= Less mechanical
= More natural

Overlapping for Smooth Transitions

Instead of this (jarring):

Logo     ░░Move░░
Logo                ░░Fade░░

= Gap between animations
= Feels disconnected

Do this (smooth):

Logo     ░░Move░░░░
Logo          ░░Fade░░░

= Fade starts before Move ends
= Smooth transition
= Professional feel

Overlap amount:

• 0.2-0.5s overlap often works well
• Too much overlap = chaotic
• No overlap = disconnected
• Find the sweet spot!

Advanced Timeline Strategies

The Intro Sequence

Build a dramatic entrance:

0s──────1s──────2s──────3s──────4s

BG      ░░FadeIn░░
Logo              ░░Drop░░░░
Logo              ░░Fade░░░░
Items                     ░░Stagger░░░░
UI                             ░░Appear░

= Builds up over time
= Each element enters in order
= Holds attention

Timing strategy:

1. Background establishes (0-1s)
2. Logo enters (1-2s)
3. Content appears (2-3s)
4. UI fades in (3-4s)
5. Everything loops from 4s

The Loop Point

For continuous animations:

Determine loop point:

• When do animations complete their first run?
• That's your loop point
• Make new animations loop from there

Example:

0s──────2s──────4s──────6s──────8s

Intro:
Logo    ░░Enter░░

Loop (starts at 2s):
Logo              ░░Pulse (loop)░░░░░░░░░░
Items             ░░Float (loop)░░░░░░░░░░

= Intro plays once (0-2s)
= Then continuous loops (2s onward)

Implementation:

• Intro animations: Loop = unchecked
• Continuous animations: Loop = checked, Delay = 2s

Multi-Stage Animations

Complex motion through stages:

Logo    ░░Move░░░Scale░░░Rotate░░░Pulse░░░

Stage 1: Enter (Move)
Stage 2: Grow (Scale)
Stage 3: Spin (Rotate)
Stage 4: Breathe (Pulse, loop)

= Sequential transformation
= Tells a story
= Keeps things interesting

Sync to Beat/Rhythm

For music-backed themes:

Match animation timing to music:

• Analyze music tempo (e.g., 120 BPM)
• Calculate beat duration (0.5s per beat at 120 BPM)
• Place animations on beats

Example (120 BPM = 0.5s per beat):

0.0s─0.5s─1.0s─1.5s─2.0s─2.5s
 |    |    |    |    |    |
Beat  Beat Beat Beat Beat Beat

Bounce  │
Pulse        │
Flash             │
Pulse                  │

Creates rhythmic, musical feel!

Timeline Troubleshooting

"I can't see any animations!"

Reasons:

• No layer selected
• Selected layer has no animations
• Timeline collapsed/hidden

Fix:

• Select a layer that has animations
• Add animations if none exist

"Animation blocks overlap weirdly!"

Causes:

• Multiple animations on same property
• Confusing visual

Solutions:

• Stagger them if possible
• Or it's fine - they can overlap!
• Preview to see actual result

"Can't drag animation block!"

Troubleshooting:

• Click directly on block (not empty space)
• Block might be locked (check layer)
• Try selecting first, then dragging

"Timeline is too zoomed in/out!"

Fix:

• Look for zoom controls
• Scroll wheel might zoom (try it)
• Reset view if available

"Playhead won't move!"

Reasons:

• Playback is stuck
• No animations to play
• Timeline needs refresh

Solutions:

• Click Stop, then Play again
• Refresh page if stuck
• Check that animations exist

Timeline Workflow

The Build Process

Step 1: Add all animations

• Don't worry about timing yet
• Just get them on the timeline
• All starting at 0s is fine

Step 2: Rough timing

• Drag blocks to approximate positions
• Create basic sequence
• Don't obsess over precision

Step 3: Preview and adjust

• Press Spacebar to watch
• Note what feels wrong
• Adjust timing

Step 4: Fine-tune

• Precise positioning
• Adjust durations
• Create overlaps
• Perfect the timing

Step 5: Test loops

• Watch for 30+ seconds
• Check smooth looping
• Adjust as needed

The Professional Polish

After basic timing works:

Add nuance:

• Slight delays on elements (not everything at exactly 0s)
• Overlaps for smooth transitions
• Varied speeds for interest

Check flow:

• Does viewer's eye move logically?
• Any jarring moments?
• Too fast or too slow?

Verify loops:

• Endless loops feel endless?
• No stutters or jumps?
• Smooth throughout?

Timeline Best Practices

Do:

• ✅ Preview constantly (Spacebar is your friend)
• ✅ Use staggered timing for groups
• ✅ Overlap transitions slightly
• ✅ Test loops for smoothness
• ✅ Build sequences logically

Don't:

• ❌ Stack everything at 0s and hope
• ❌ Forget to preview
• ❌ Make everything the same duration
• ❌ Ignore the loop point
• ❌ Over-complicate timing

Timeline Reference

Action	Method	Result
Play/Pause	Spacebar or ▶	Preview animations
Stop	⏹ button	Reset to beginning
Scrub	Drag playhead	Jump to time
Move block	Drag block	Change start time
Adjust duration	Drag edges	Change length
Delete animation	Select + Delete key	Remove animation
Screenshot	📷 during playback	Capture frame

Next Steps

• Animation Basics - Understanding animation properties
• Best Practices - Professional timing techniques
• Your First Theme - Apply timeline skills

---

Master the Timeline, Master the Theme! Time to become a timing wizard! ⏱️✨