Déjà Vue

Appearance

Timeline Component ​

The Timeline component sequences nested Tween, Timeline, and Marker components. Place SplitText inside a Tween slot (see Split text). Nesting rules: Core concepts, Nesting.

Basic timeline sequence ​

html
<script setup>
import { Timeline, Tween } from 'deja-vue'
</script>

<template>
  <Timeline>
    <Tween :to="{ x: 56 }">
      <div class="target" />
    </Tween>
    <Tween :to="{ y: -56, rotate: 90 }">
      <div class="target" />
    </Tween>
  </Timeline>
</template>

Use position for GSAP placement on the parent timeline. More patterns (nested timelines, markers, parallel tweens, manual parent) live in Nesting.

Seamless tween chains ​

Seamless nested tweens share the same DOM target inside a wrapper. See Animation targets — seamless (canonical example with Timeline).

Props, events, and slot ​

Full prop and event reference: Components API — Timeline.

Default slot: animation, direction, parent, progress (same as Tween — Default slot).

Events: (animation, parent) — start, update, complete, repeat, reverseComplete, interrupt.

Imperative playback ​

Use trigger + trigger-action for button-driven play, reverse, reset, restart, and so on — see Animation controls — Trigger. To pass parent to a nested child, use the inner Timeline slot — Nesting — Manual parent assignment.

Timeline duration ​

html
<Timeline :duration="3">
  <Tween :to="{ x: 56 }">
    <div class="target" />
  </Tween>
</Timeline>

A positive duration preserves fixed total timing as children are added or removed.

GSAP timeline options ​

html
<Timeline :options="{ repeat: 2, yoyo: true, paused: true }">
  <Tween :to="{ x: 56 }">
    <div class="target" />
  </Tween>
</Timeline>

options updates apply to the timeline vars and to children added after the change. Remount with :key if every child must pick up new vars.

ScrollTrigger ​

Pass scrollTrigger inside options. Full setup, defaults, and smooth-scroll notes: Animation targets — ScrollTrigger.