Pinned slide show bound to scroll position?

[Thisjustin]

Hello,

 

I'm new to GreenSock and just trying to wrap my head around it. I have a project where I'd like to have a pinned element display a slide show that progresses with the scroll position. When the end of the slide show is reached the parent element is unpinned. The slides are absolutely positioned on top of one another and then their opacity should change in sequence with the scroll position.

 

I've been able to get the first transition to occur (although I'd actually like to be able to delay it) as the first slide begins to fade out when the parent element hits the top and gets pinned. After that I get a little lost. My attempts to make the second slide fade out haven't worked as I don't know what to use as a trigger once the parent becomes pinned.

 

I want to do something like:

start: 'top top-=100%'

So that the start of the second transition occurs after the pinned container reaches the top, but this does not appear to be valid.

 

Appreciate any advice, perhaps I'm going about this the wrong way? Thanks in advance!

See the Pen zYajeaY by Thisjustin3141 (@Thisjustin3141) on CodePen

[Rodrigo]

Hi @Thisjustin and welcome to the GreenSock forums!

 

I think it's easier with a loop for the slides and just a single timeline for each slide using ScrollTrigger's scrub configuration as well.

 

Here  is a live example:

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

 

Also, since you are starting with GSAP I strongly recommend you to watch this video by @Cassie in order to get a better grasp of how to create a good working flow when using GSAP and ScrollTrigger on your projects:

Let us know if you have more questions.

 

Happy Tweening!