Gsap Pin Slide up with ScrollTrigger and ScrollSmoother Problem

[Tung Shark]

i wanna pin parent div and slide up div child. Everything was going well until a added ScrollSmoother and parent div end pin when last slide not moving up done.  Can u guys support me? 

here its my code without ScrollSmoother

See the Pen vYVqqPa by manhnguyenn (@manhnguyenn) on CodePen

and one more thing if u guys can help me edit the speed for every slide equal.

Thanks a lot for your help

See the Pen RwezzvY by manhnguyenn (@manhnguyenn) on CodePen

[Rodrigo]

Hi @Tung Shark and welcome to the GreenSock forums!

 

First thanks for being a Club GreenSock member and supporting GreenSock! 💚

 

There are a mix of issues in your setup, some are GSAP related and other are just HTML/CSS related. For example the cards container has a width of 100% but no height and since all it's children have an absolute position, the natural height of the parent is zero, so giving it a height of 100vh seems to work.

 

Then you had this on your ScrollTrigger config:

end: wheight * 5 + ' bottom',
duration: 1,

ScrollTrigger doesn't recognize duration as a config option so that's just ignored. Also if you want a ScrollTrigger to extend 5 times the height of the viewport just pass a relative percentage value like this: end: "+=500%" and ScrollTrigger will do the rest for you.

 

Finally you don't need to pass this to a GSAP animation:

stagger: 0.2,
start: () => "top top",
end: () => 'bottom bottom',

Start and end are just for the ScrollTrigger config and are ignored in a GSAP animation.

 

I forked your codepen and made a few changes to it and seems to work the way you intend:

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

 

Hopefully this helps.

Happy Tweening!

[Tung Shark]

Thanks @Rodrigo,  i appreciate your help!