Named Timelines

advanced

Orchestrate multi-step animation sequences with named timelines. Chain animations with precise positioning.

Timeline Concept

Named timelines let you create multi-step animation sequences where multiple elements animate in a coordinated order. A parent element defines the timeline with data-etch-motion-timeline="name". Each child step has data-etch-motion-timeline-step="name" with a position value that determines when it plays. Steps are sorted by position, each with a try/catch so one malformed step doesn't break the sequence.

<!-- Parent -->
<div data-etch-motion-timeline="hero-sequence">

  <!-- Step 1: position 0 -->
  <h1 data-etch-motion-timeline-step="hero-sequence"
      data-etch-motion-timeline-position="0"
      data-etch-motion-timeline-action="from"
      data-etch-motion-timeline-from=''>
    Heading
  </h1>

  <!-- Step 2: position 0.3 -->
  <p data-etch-motion-timeline-step="hero-sequence"
     data-etch-motion-timeline-position="0.3"
     data-etch-motion-timeline-action="from"
     data-etch-motion-timeline-from=''>
    Description
  </p>
</div>

Timeline step elements are excluded from normal animation routing — they only animate as part of their timeline.

Timeline Triggers

The trigger is defined on the parent: scroll (plays when parent scrolls into view, can include scrub and pin), load (plays immediately), or click (plays when parent is clicked). Scroll-scrubbed timelines link the entire sequence progress to scroll position — great for storytelling sections.

<!-- Scroll-scrubbed timeline -->
<div data-etch-motion-timeline="story"
     data-etch-motion-trigger="scroll"
     data-etch-motion-scroll-scrub="1"
     data-etch-motion-scroll-pin="true">

Step Actions

Each step uses one of three GSAP methods: from (animate FROM specified values to natural state), to (animate TO specified values), fromTo (animate between two sets of values). Values are JSON objects passed via data-etch-motion-timeline-from and data-etch-motion-timeline-to attributes.

<!-- from action -->
data-etch-motion-timeline-action="from"
data-etch-motion-timeline-from=''

<!-- to action -->
data-etch-motion-timeline-action="to"
data-etch-motion-timeline-to=''

<!-- fromTo action -->
data-etch-motion-timeline-action="fromTo"
data-etch-motion-timeline-from=''
data-etch-motion-timeline-to=''