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! ?
