Learning how to add exit animation to an existing timeline

[le_kiki]

Hey there,

I'm currently messing around and trying to learn the Scroll Trigger plugin and have created the below CodePen:

 

Currently from the documentation I have used example code to make some boxes that animate when the top of the trigger hits the top of the viewport, that part works perfect.

 

So I then tried to alter the code to add another animation that starts as the trigger leaves the viewport.

Does this require a new timeline? Or is it possible to add something in the same timeline? 

 

In my CodePen example I tried with a new timeline so as to set different triggers but am not sure if this is best practice or not, and clearly from my CodePen it doesn't work as expected. If you scroll you'll see my first animation working, then keep scrolling and you see my second anim work and then break.

 

What would be the best practice to add an exiting animation to these boxes? 

 

I am just looking to learn, so will appreciate explanation responses to these questions

See the Pen OJmMLrL by desode (@desode) on CodePen

[OSUblake]

Hi le_kiki!

 

First, I would recommend using y instead of top. It's better for performance.

tlr
.to(".four", { y: 160 })
.to(".three", { y: 120 })
.to(".two", { y: 80 })
.to(".one", { y: 40 })

 

For something like that, you may want to look at the batch method.

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.batch()