Gsap Scrollsmoother not working with tailwind css

[mabdelra]

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

[Rodrigo]

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!!!

[mabdelra]

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

 

[GreenSock]

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? 

[mabdelra]

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!