Jump to content
GreenSock

mabdelra

Gsap Scrollsmoother not working with tailwind css

Go to solution Solved by GreenSock,

Recommended Posts

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

Screenshot 2022-09-26 at 23.15.12.png

Screenshot 2022-09-26 at 23.15.16.png

Screenshot 2022-09-26 at 23.15.22.png

Screenshot 2022-09-26 at 23.16.13.png

Link to comment
Share on other sites

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

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

  • Solution

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

  • 4 weeks later...
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

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.
×