teamcolab Posted September 28, 2022 Share Posted September 28, 2022 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 More sharing options...
GreenSock Posted September 28, 2022 Share Posted September 28, 2022 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. 1 Link to comment Share on other sites More sharing options...
teamcolab Posted September 28, 2022 Author Share Posted September 28, 2022 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 More sharing options...
Rodrigo Posted September 28, 2022 Share Posted September 28, 2022 Hi, Yep @GreenSock beat me to it 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! 2 Link to comment Share on other sites More sharing options...
teamcolab Posted September 28, 2022 Author Share Posted September 28, 2022 Thank you both so much! I believe I should be able to get my animations working based on the codepen you provided Rodrigo! 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now