mabdelra Posted September 26, 2022 Share Posted September 26, 2022 Hi guys im trying to use scrollsmoother on my website with tailwindcss however whenever i add data speed to an element it causes the element to just be fixed to the final position relative to where its heading according to the scrollsmoother if it were to smooth the divs on scroll . I have no idea why this is happening, i tried forking other scrollsmoother demos without tailwind and had no issues whatsoever. if someone could provide me with an explanation and or solution it would be much appreciated. Ive attached a codesandbox demo below however i have no idea how to attach the gsap scrollsmother dependency but i linked all the necessary code files within the sandbox. Sorry guys im very new to using codesandbox. I also have images below of the issue. https://codesandbox.io/s/zen-lake-pxlpm0 Link to comment Share on other sites More sharing options...
Rodrigo Posted September 26, 2022 Share Posted September 26, 2022 Hi @mabdelra and welcome to the GreenSock forums! Unfortunately the codesandbox you're sharing is not working since you have a lot relative paths to different JS files. On top of that you're using GSAP 3.10.4 and perhaps the other demos you mentioned were using the latest version. Try adding your setup to this Codepen: See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen In order to add the latest version of Tailwind to it, you can add this at the top of the HTML section: <script src="https://cdn.tailwindcss.com"></script> Happy Tweening!!! Link to comment Share on other sites More sharing options...
mabdelra Posted September 27, 2022 Author Share Posted September 27, 2022 Hi @Rodrigo, thank you for your help with the codepen it should work now, the link is See the Pen BaxJdZK by mabdelra15 (@mabdelra15) on CodePen As you can see, whenever i change or add the data-speed attribute it just changes the position of the div on the viewport instead of slowing the scroll of it Link to comment Share on other sites More sharing options...
Solution GreenSock Posted October 2, 2022 Solution Share Posted October 2, 2022 Hi @mabdelra. Sorry for the delay. The problem with your CodePen is that you specified a wrapper and content that didn't exist. You forgot to wrap all your content in a container <div>. Please see the docs for details. Here's a fork where I just added those wrappers in: See the Pen VwxxWOz?editors=1010 by GreenSock (@GreenSock) on CodePen Does that work the way you wanted? Link to comment Share on other sites More sharing options...
mabdelra Posted October 27, 2022 Author Share Posted October 27, 2022 On 10/2/2022 at 2:00 AM, GreenSock said: Hi @mabdelra. Sorry for the delay. The problem with your CodePen is that you specified a wrapper and content that didn't exist. You forgot to wrap all your content in a container <div>. Please see the docs for details. Here's a fork where I just added those wrappers in: Yes thank you so much! 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