Jump to content

Tung Shark

Gsap Pin Slide up with ScrollTrigger and ScrollSmoother Problem

Moderator Tag
Go to solution Solved by Rodrigo,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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!

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.