Jump to content
GreenSock

teamcolab

ScrollSmoother Demo Not Working

Recommended Posts

I have been attempting to get ScrollSmoother to work and have had no success. I made a codepen using this one as a reference but it still is not working.

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

Can anyone give me suggestions for what is wrong?

See the Pen MWGQvqO by jlw2uc (@jlw2uc) on CodePen

Link to comment
Share on other sites

You need to have the #smooth-wrapper at the root level. Right now, you've got it INSIDE a <section>.  ScrollSmoother is for smoothing the scroll of the whole page, not an individual section. 

  • Like 1
Link to comment
Share on other sites

Thank you, I have moved both the #smooth-wrapper and #smooth-content outside of my <section> but I am still not seeing the animation. 

Link to comment
Share on other sites

Hi,

 

Yep @GreenSock beat me to it :D

 

On top of what Jack mentioned, be aware that your ScrollTrigger configuration is a bit odd and you are animating both the top position and the yPercent, I would stick to just yPercent since it would trigger a transform and you'll get better performance. Also I wouldn't recommend using the <body> element as a trigger while using SmoothScroller, just use the main container that sits at the top of your app:

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

 

The reason you're not seeing the animation is because is triggering when the element is not on the viewport, the codepen above is a better approach and hopefully a good starting point.

 

Happy Tweening!

 

  • Like 2
Link to comment
Share on other sites

Thank you both so much! I believe I should be able to get my animations working based on the codepen you provided Rodrigo!

  • Like 2
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.
×