Scrolltrigger help - horizontal sliding divs on scroll - unpin parent section when done

[Zenixbe]

Hello, newbie here. 

I'm working on a new project and started experimenting with GSAP. 
I'm trying to accomplish the following:

 

A fullheight section, containing 3 sliding galleries, and a fading div after the sliding animations. All animations are scrubbable.
When the top of the fullheight section becomes visible in viewport (let's say 100px from the bottom) this should begin the scrubbing of the first gallery.

When the top of the fullheight section reaches the top of the viewport this fullheight section should be pinned.

When scrolling, the second gallery should begin to animate at 75% of the previous animation. Same for the third gallery.

At 75% of the third animation, the fading div should start to animate.

When this animation is done, the fullheight section gets unpinned.

Here is where i stranded:

https://app.usebubbles.com/viyChzoMkPo5r1B9a8MoA5/my-video-recording

The animations are ok (bit laggy because i need to compress images), but the animation starts when the parent section gets pinned, this should be animating earlier, and when the parent section reaches top, only then should the parent section be pinned for the rest of the duration of the animations in this section. 

 

An issue i have in the minimal demo is that the fading div is not in the second section, but the third. 

This fading div has absolute positioning, the parent section has relative positioning. don't know what's up with that.

All help is very much appreciated! 😇

 

 

 

See the Pen PoeRoBd by arne-de-meulenaere (@arne-de-meulenaere) on CodePen

[Rodrigo]

Hi @Zenixbe and welcome to the GreenSock forums!

 

The best approach I can think of is to have two ScrollTrigger instances, one for the images stripes (nice effect by the way, great job! 👏) and the text when the section top reaches a specific point in the viewport, and another one that only pins the container when it reaches the top of the viewport. In this case we can use a function based value for the end point and the end value of the ScrollTrigger instance to make both ScrollTrigger instances end at the same point.

 

Also your text wrapper indeed has an absolute position inside of a relative parent BUT, it has no top or left position, so the browser puts it after the previous element.

 

Hopefully this works in the way you expect:

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

 

Let us know if you have other questions.

 

Happy Tweening!