Scrolltrigger start position

[Hector18]

I've created a demo with 3 ScrollTriggers. For the lists, I'm adding the 'in-view' class. Everything works fine, but it's not synchronized with the parent div that's pinned. How could I synchronize them?

Thank you!

See the Pen wvNVvJO by Hector18 (@Hector18) on CodePen

[mvaneijgen]

What I would do if I know things should be synced is create a timeline with all the animations on it. This way I can focus on the animation at hand and leave ScrollTrigger out of it, all it's doing is just animating my animation on scroll. So before thinking about ScrollTrigger I first have to fix the animation that I want to  happen.

 

What I've done is reduced all your code to just one timeline with one ScrollTrigger (disabled for now). I've updated your initial gsap.set() to have the last item "Data Analytics" to be in the middle of the block (where I want it to end). Then on the timeline are 3 tweens, one that sets the text to opacity one, another to set it back to 0.1 and the last tween that moves the whole block up. There are some fancy staggers and position parameter's I've used to line everything up, but this way you can be sure everything is synced, because it is one timeline. If you're ready to see how this would work on scroll you can uncomment the ScrollTrigger code.  I’ve placed some comments in your JS to better explain things, please be sure to read through them! 

 

Hope it helps and happy tweening! 

 

See the Pen abXeveE?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen