Timeline - Basics

Timeline is a container for managing multiple tweens as a group, allowing precise timing control and sequencing.

Creating a Timeline

Use the declarative FasterMotion.dom() API with type: 'timeline' to create timeline animations.

Syntax

FasterMotion.dom({
  type: 'timeline',
  paused?: boolean,
  repeat?: number,
  yoyo?: boolean,
  onComplete?: () => void,
  items: TimelineItem[]
})

Parameters

type: 'timeline' (required) - Specifies timeline animation

paused: boolean (optional) - Start paused (default: false)

repeat: number (optional) - Number of repeats (-1 for infinite)

yoyo: boolean (optional) - Reverse on repeat (default: false)

onComplete: () => void (optional) - Called when timeline completes

items: TimelineItem[] (required) - Array of animation items

Returns

Timeline instance with control methods: play(), pause(), restart(), reverse(), etc.

Example

// Create timeline with declarative API
const tl = FasterMotion.dom({
  type: 'timeline',
  paused: true,
  items: [
    { target: '.box1', to: { x: 100 }, duration: 500, at: 0 },
    { target: '.box2', to: { y: 100 }, duration: 500, at: 500 },
    { target: '.box3', to: { rotation: 180 }, duration: 500, at: 1000 }
  ]
});

tl.play();

Try it: Basic Timeline

const tl = FasterMotion.dom({
  type: 'timeline',
  paused: true,
  items: [
    { target: '#box1', to: { x: 100 }, duration: 500, at: 0 },
    { target: '#box2', to: { y: 100 }, duration: 500, at: 500 },
    { target: '#box3', to: { rotation: 180 }, duration: 500, at: 1000 }
  ]
});

tl.play();

Timeline Items

Each item in the items array represents an animation in the timeline.

to() Animation

Animate to target values.

{
  target: string | HTMLElement,
  to: object,           // Target properties
  duration: number,     // Animation duration in ms
  at: number,          // Start time in ms (optional)
  ease: string         // Easing function (optional)
}

Example:

const tl = FasterMotion.dom({
  type: 'timeline',
  items: [
    { target: '.box1', to: { x: 100 }, duration: 500, at: 0 },
    { target: '.box2', to: { y: 100 }, duration: 500, at: 500 },
    { target: '.box3', to: { rotation: 180 }, duration: 500, at: 1000 }
  ]
});

from() Animation

Animate from specified values to current state.

{
  target: string | HTMLElement,
  type: 'from',
  from: object,         // Starting properties
  duration: number,
  at: number
}

Example:

const tl = FasterMotion.dom({
  type: 'timeline',
  items: [
    { target: '.title', type: 'from', from: { opacity: 0, y: 30 }, duration: 600, at: 0 },
    { target: '.subtitle', type: 'from', from: { opacity: 0 }, duration: 400, at: 400 }
  ]
});

fromTo() Animation

Animate from explicit start values to explicit end values.

{
  target: string | HTMLElement,
  type: 'fromTo',
  from: object,         // Starting properties
  to: object,           // Target properties
  duration: number,
  at: number
}

Example:

const tl = FasterMotion.dom({
  type: 'timeline',
  items: [
    {
      target: '.box',
      type: 'fromTo',
      from: { scale: 0, opacity: 0 },
      to: { scale: 1, opacity: 1 },
      duration: 800,
      at: 0
    }
  ]
});

Timing with `at` Parameter

The at parameter controls when animations start within the timeline (in milliseconds).

Absolute Time

Specify the exact time when an animation should start:

const tl = FasterMotion.dom({
  type: 'timeline',
  items: [
    { target: '.box', to: { x: 100 }, duration: 500, at: 0 },      // Start immediately
    { target: '.box', to: { y: 100 }, duration: 500, at: 1000 },   // Start at 1000ms
    { target: '.box', to: { rotation: 180 }, duration: 500, at: 2500 } // Start at 2500ms
  ]
});

Sequential Animations

Animations run one after another by calculating at times:

const tl = FasterMotion.dom({
  type: 'timeline',
  items: [
    { target: '.box1', to: { x: 100 }, duration: 500, at: 0 },   // 0-500ms
    { target: '.box2', to: { x: 100 }, duration: 500, at: 500 }, // 500-1000ms (after box1 ends)
    { target: '.box3', to: { x: 100 }, duration: 500, at: 1000 } // 1000-1500ms (after box2 ends)
  ]
});

Overlapping Animations

Start an animation before the previous one ends:

const tl = FasterMotion.dom({
  type: 'timeline',
  items: [
    { target: '.box1', to: { x: 100 }, duration: 500, at: 0 },   // 0-500ms
    { target: '.box2', to: { x: 100 }, duration: 500, at: 300 }  // 300-800ms (200ms overlap)
  ]
});

Try it: Overlapping Animations

const tl = FasterMotion.dom({
  type: 'timeline',
  paused: true,
  items: [
    { target: '#box1', to: { x: 100 }, duration: 500, at: 0 },
    { target: '#box2', to: { x: 100 }, duration: 500, at: 300 } // Overlaps by 200ms
  ]
});

tl.play();

Simultaneous Animations

Start multiple animations at the same time:

const tl = FasterMotion.dom({
  type: 'timeline',
  items: [
    { target: '.box1', to: { x: 100 }, duration: 500, at: 0 },
    { target: '.box2', to: { y: 100 }, duration: 500, at: 0 }, // Starts with box1
    { target: '.box3', to: { rotation: 180 }, duration: 500, at: 0 } // Starts with box1 & box2
  ]
});

Timeline - Basics

Creating a Timeline

Syntax

Parameters

Returns

Example

Try it: Basic Timeline

Timeline Items

to() Animation

from() Animation

fromTo() Animation

Timing with `at` Parameter

Absolute Time

Sequential Animations

Overlapping Animations

Try it: Overlapping Animations

Simultaneous Animations

See Also

On this page