Need Help Replicating a Pinning and Scrolling Animation Effect in GreenSock

[Deroldo]

I'm trying to create a functionality similar to the example in this CodePen, but I need it to do the following:
 

1. When it reaches a specific section, it should add a pin to that section.
2. For each scroll within this pinned section, it should first change the text, then display an image gallery.
3. With each scroll, it should switch to a new image in the gallery until it reaches the last one.
4. When it reaches the end of the gallery, it should transition to the next section, and then remove the pin, just like in the example video below.

 

In the codepen example, it scroll horizontally, i want to make something like this but vertically.

Sorry por the bad quality of video, but the upload only allows 1mb of file size.

See the Pen PoXOmGy by joaoderoldo (@joaoderoldo) on CodePen

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

If you're looking for ScrollTrigger effects, I'd recommend looking at the demos at https://greensock.com/st-demos and https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ - you may be able to use one of those as a jumping-off point. 

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look.