Issues with scrolltrigger start

[phernand42]

Hi Everyone, 

 

Trying to figure out how I would initiate scroll trigger if my trigger was more then half way down a page. As you will see in my codepen example, the graphic

I'm trying to animate which is below the purple container has already ran through the animation timeline without any scrolling interaction. I set up my trigger to start at ".center-container" but that doesn't seem to work any longer. How would I go about finding the exact start value of my trigger or how I get it to start properly at my desired trigger point? What should happen is when a user scrolls to that section/div it will cycle through animations until the end of that container. 

 

Thanks!!

See the Pen eYzMEVM?editors=1010 by phernand42 (@phernand42) on CodePen

[ZachSaucier]

Hey phernand42. I think you must be misunderstanding how ScrollTrigger works. Your ScrollTrigger with the trigger as '.center-container' is attached to a timeline but that timeline has no animations or callbacks attached to it... All it does is pin the '.center-container' section for the scrolling specified.

 

Then you create other timelines and ScrollTriggers with different triggers and start positions. So affecting the first timeline or ScrollTrigger that you created won't affect the others - they're separate as you have it now. 

 

There are multiple ways of doing what you're trying to do, but I might recommend using a single timeline or nested timelines like so:

See the Pen OJXEvOv?editors=0010 by GreenSock (@GreenSock) on CodePen

[phernand42]

Thanks for the explanation and example @ZachSaucier!

 

This is all starting to click a little more now.