the start and the end of pinning in horizontal scroll

[Nora]

hi 

I want to now how I start another animation after I finish scrolling horizontally 

so as it show in demo the main div (green div) and pink div appears at same time  in viewport when I scrolling 

 

how can I fix this? I want when I finish scrolling horizontally the green div came to viewport

See the Pen eYKyBxR by nora10 (@nora10) on CodePen

[Rodrigo]

Hi,

 

Are you trying to do something like this:

See the Pen VwdyxPj by GreenSock (@GreenSock) on CodePen

 

Please notice a few changes and comments in the example. I removed the script tags from the HTML section, in codepen there is no need for that. On top of that you were using different and outdated versions of GSAP and ScrollTrigger. Always use the latest versions on both. Also you were adding a script tag for another library called ScrollTrigger, probably not a good idea since it could lead to namespace conflicts somehow.

 

I added an extra green section so you can see an extra scroll space and also commented out the part of your code that was creating the ScrollTrigger instances for the section element, since it doesn't have a start or end values and is also pinning the section. It's always a good idea to add start and end values when starting with your ScrollTrigger development, as well as using markers during development in order to see where your instances are starting and ending.

 

Finally take a look at this video by @Cassie in order to get a better grasp of how to start working with ScrollTrigger:

Let us know if you have more questions.

 

Happy Tweening!

[GreenSock]

By default, pinSpacing is false [only] when the parent is display: flex because flex spacing is very different and in most cases people don't want pinSpacing inside a flex container but in your case it sounds like you do. So just add pinSpacing: true. Does that help? 

See the Pen oNypdWx by GreenSock (@GreenSock) on CodePen