Documentation Index
Fetch the complete documentation index at: /llms.txt
Use this file to discover all available pages before exploring further.
🚀 Coming Soon: Squeditor - Build professional HTML websites with no-code, Join the waitlist.
Coordinate synchronized, automated timeline sequences entirely via data attributes.
data-gsap-timeline.
This is incredibly powerful for complex sequences and interactive button hovering.
data-gsap-timeline creates a master sequence. Every child element inside that wrapper that possesses a GSAP attribute (data-gsap, data-gsap-split, data-gsap-draw, etc.) is automatically injected into that timeline in DOM order.
<div data-gsap-timeline="repeat: -1; yoyo: true">
<!-- Starts instantly, from the beginning of timeline execution -->
<div data-gsap="from: {opacity: 0, y: -20}; duration: 1">First</div>
<!-- Automatically waits for the first element to finish -->
<div data-gsap="from: {scale: 0}; duration: 0.5">Second</div>
<div data-gsap="from: {opacity: 0}; delay: 0.2">Third (0.2s pause before starting)</div>
</div>
position parameter on individual children to override sequential ordering:
<!-- Start 0.3s BEFORE the previous animation finished -->
<div data-gsap="to: {x: 100}; position: '-=0.3'">Simultaneous</div>
<!-- Force it to trigger exactly at the 0 absolute mark -->
<div data-gsap="to: {y: 100}; position: 0">Absolute Start</div>
<!-- The timeline instance -->
<div id="target-sequence" data-gsap-timeline="paused: true">
<div data-gsap="to: {x: 100}">...</div>
</div>
<!-- Remote control buttons -->
<button data-gsap-play="#target-sequence">Play</button>
<button data-gsap-pause="#target-sequence">Pause</button>
<button data-gsap-reverse="#target-sequence">Reverse</button>
<button data-gsap-toggle="#target-sequence">Toggle Open/Close</button>
Was this page helpful?