Timeline

The modifier .timeline lets you create complex and dependent animation timelines.

`.timeline`

For a timeline to be instantiated, place v-gsap.timeline on the parent. You can then add animation steps on each child with .add

<section v-gsap.timeline>
    <h1 v-gsap.add.from="{ x: -32 }">Hello World</h1>
    <div v-gsap.add.from="{ scale: 0 }">They see me animating</div>
</section>

A timeline also supports .whenVisible so you can define complex entrance animations together

<section v-gsap.timeline.whenVisible>
    <h1 v-gsap.add.from="{ x: -32 }">Hello World</h1>
    <div v-gsap.add.from="{ scale: 0 }">They see me animating</div>
</section>

See more detailed explanation below

`.timeline.pinned`

Lets you create an animation that gets pinned once in position to then play each added steps. To define when and how long a section gets pinned, use the following properties

start
- default center center
end
- default: '+=1000px'

You can set these properties individually like so:

<div v-gsap.timeline.pinned="{ start: 'top top', end: '+=1200px' }"></div>

`.add`

To add each individual animation step inside a timeline, use .add

<section v-gsap.timeline>
    <h1 v-gsap.add.from="{ x: -32 }">Hello World</h1>
    <h2 v-gsap.add.from="{ x: -32 }">Still here</h2>
</section>

Ordering

By default, all steps are ordered like they appear in the html.

<section v-gsap.timeline>
    <h1 v-gsap.add.from="{ x: -32 }">Hello World</h1> <!-- Order: 0 -->
    <div>
        <span v-gsap.add.from="{ scale: 0 }">They see me animating</span> <!-- Order: 1 -->
        <span v-gsap.add.from="{ scale: 0 }">They see me animating</span> <!-- Order: 2 -->
    </div>
    <h2 v-gsap.add.from="{ x: -32 }">Still here</h2> <!-- Order: 3 -->
</section>

`.order-`

If your animation steps need to be in a custom order you can use .order to define the order yourself:

<section v-gsap.timeline>
    <h1 v-gsap.add.order-0.from="{ x: -32 }">Hello World</h1> <!-- Order: 0 -->
    <div>
        <span v-gsap.add.order-3.from="{ scale: 0 }">They see me animating</span> <!-- Order: 3 -->
        <span v-gsap.add.order-2.from="{ scale: 0 }">They see me animating</span> <!-- Order: 2 -->
    </div>
    <h2 v-gsap.add.order-1.from="{ x: -32 }">Still here</h2> <!-- Order: 1 -->
</section>

`.withPrevious`

If you want to run an animation step parallel to the one before, you can use this modifier.

<section v-gsap.timeline>
    <h1 v-gsap.add.from="{ x: -32 }">This runs at the</h1>
    <h2 v-gsap.add.withPrevious.from="{ x: -32 }">same time</h2>
</section>

For single elements with multiple steps, .withPrevious references the previous animation step, not the previous element

Multiple Steps per Element

You can also add multiple steps on one element:

<section v-gsap.timeline>
    <h1 
        v-gsap.add.fromInvisible.from="{ x: -32 }"
        v-gsap.add.to="{ scale: 2 }">
        Hello World
    </h1>
</section>

You can not use the same modifier combination multiple times. A dirty hack would be to add some made-up modifier to satisfy the error.

Callbacks

There are five callbacks available that you can attach to a timeline

.onEnter
.onEnterBack
.onLeave
.onLeaveBack
.onUpdate

All of them will pass a timeline snapshot that you can receive as prop.

You can use them like so:

<section v-gsap.timeline.onUpdate="(self) => { console.log(self) }">
    ...
</section>

Due to the nature of directives, you can only use one callback per timeline. Hint: .onUpdate contains all information that you need deduce the other events, mainly from direction and progress

Edit this page on GitHub

UsagePresets

UsageComposable