Question - 2 overlapping Scrolltriggers with scrub, each with it's own pin - possible?

[newguy123]

Hi

 

I have 2 scrolltriggers with image sequence, currently the 2nd one only start scrubbing, when the 1st one finishes. Each one is pinned with text scrolling over it in a timeline.

 

However, is it possible to shift UP the 2nd one, so it fades in over the 1st one, while each maintains its own pinning?

 

In my image it probably illustrates it better. The one on the left, is how I CURRENTLY have it. The 1st blue Pin represents the full browser window. As the blue scrolls to the end, the 2nd scrolltrigger, the green one starts and is pinned in its green section. However, I want to change it so that things work more like the DESIRED image on the right, ie, when I get to almost the last bit of the blue scrolltrigger, the green one fades in, is pinned, and scrubs its context. ie.

The problem I'm having is how to work out how to move the 2nd scrolltrigger up a bit, so it starts over the previous one, instead of after it.

[Toso]

hi @newguy123 it would be great if you could add a minimal demo 🙏

[Rodrigo]

Hi,

 

As Toso mentions without a minimal demo there is not a lot we can do, but this mostly could biol down to layout HTML and CSS. My first try would be to have the elements positioned absolutely on top of each other, give an autoAlpha: 0 to all except the first one and just pin the parent element.

 

Or maybe something like this:

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

 

Hopefully this helps.

Happy Tweening!