ScrollTrigger with offset

[jhob101]

I've created a ScrollTrigger to animate in lots of elements on the page as they become visible.

 

What I'd like to do is be able to combine that with offset so that each group that appears on screen, they will animate in with a slight delay each.  At the moment they all appear at once, which is to be expected as each has its own timeline.

 

My thinking is that I'd need to somehow get all the elements that become visible at (roughly) the same time onto the same timeline so that can then use offset.  But I can't think how that's possible, and I'm sure there must be a simpler solution.

 

Is there a way to achieve this?

See the Pen ExoKVML by jhob101 (@jhob101) on CodePen

[PointC]

Sounds like you're looking for the .batch() method.

 

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

 

Happy tweening.

 

[jhob101]

That sounds like exactly the thing!  I'll check it out, cheers.

[jhob101]

I've modified the pen and have this working, save for one bug:

 

If you scroll back up and scroll back down they animate back into visibility, but it looks odd because they're already visible.

 

Is there a way of disabling the animation once they're visible so that it doesn't play again?

[PointC]

You can set once:true.

 

See the Pen 110fff468e71081132768c9ce6a2d8dc by PointC (@PointC) on CodePen

 

Happy scrolling.

 

[jhob101]

Amazing!  Thanks so much for your help, very much appreciated.