Stacked scroll

[tobi~ks]

I made this animation using Scroll-Trigger. The concept is to scroll normally through the main page until reaching a specific section. This section is pinned, and its subsections are stacked and animated one over the other on scroll. Once the last subsection is reached, the main page continues with normal scrolling. However, when I try to add Scroll-Smoother to the page, the animation doesn't work.

I would be grateful if you could help me. 

Thank you in advance!

 

See the Pen raarNEG?editors=0010 by mohamed-islem (@mohamed-islem) on CodePen.

[Rodrigo]

Hi @tobi~ks and welcome to the GSAP Forums!

 

Because of the way ScrollSmoother works elements with position sticky don't work as expected. The best choice is to use ScrollTrigger in order to pin the elements, as shown in this demo:

See the Pen VYYBmZv by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[tobi~ks]

 

Hi Rodrigo,

Thanks for your help !
How can I play the animation as it was before adding Scroll-Smoother?, I want to keep the same behavior.

Thanks in advance !

 

 

[Rodrigo]

6 hours ago, tobi~ks said:

I want to keep the same behavior.

Care to elaborate a bit? What would be this behaviour?

 

Thanks!

[tobi~ks]

 

Hi Rodrigo,

The transform "overlapping" of the next sub-section is not driven by the scroll position with scrub: true. Instead, it’s triggered when the element enters the bottom of the view-port, as shown in the code below. After that, the sub-section is pinned, and the scroll continues accordingly:

onEnter: () => {
  if (i > 0) {
    gsap.to(panel, {
      y: "0%",
      duration: 1,
      ease: "power2.inOut"
    });
  }
},

To see the animation in action, please open my CodePen example in a large window.

Thanks in advance !

 

 

[Rodrigo]

Hi,

 

Maybe you mean something like this:

See the Pen WNWPKBp by GreenSock (@GreenSock) on CodePen.

 

Or perhaps this demo that uses the Observer Plugin:

See the Pen ExEOeJQ by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!