Jump to content
Search Community

Installing GSAP ScrollSmoother in Webflow

Geoff Dawes test
Moderator Tag

Go to solution Solved by iDad5,

Recommended Posts

Hi :)

I've just purchased the Greensock Shockingly Green package & I can't figure out how to install the ScrollSmoother in Webflow. 
I've tried copying the "ScrollSmoother.min.js" code and pasting it into the <head></head>. I also tried pasting it before the  </body> to no avail. 

 

I haven't included a Codepen as my only issue is actually installing it. 


I'm new to all of this so the npm/yarn options confuse me so much.
Was kinda hoping for a CDN option where I could just add the script into the header and Voila 😅

Has anyone actually managed to successfully install it & get it working in Webflow? 

Appreciate any guidance ❤️ 

  • Like 1
Link to comment
Share on other sites

  • Solution

I'm not at all familiar with Webflow, but as a  general hint, I would remind you that ScrollSmoother is an addition to ScrollTrigger and ScrollTrigger needs GSAP to run, so usually you at least need to 'paste' all three of those in your page's head, if that is the only way you can go.

  • Like 2
Link to comment
Share on other sites

  • 1 month later...

Hey @Geoff Dawes can you post what gave you the light bulb moment? I'm still having trouble trying to link Scroll Smoother. I watched the <script> tutorial on the site and my site is still not working. Btw in the second image code sandbox keeps correcting my '#smoothwrapper' to double quotes. In the tutorial Green Sock had she used single quotes. Don't know if this may be the issue?

 

Also I am using Webflow. I was going to pull the file from dropbox, unless you could recommend a better efficient way?

 

I have both ScrollSmoother and Scroll Trigger registered. Any help or links to other videos is appreciated. 

 

 

 

1920902165_ScreenShot2022-09-20at6_15_14PM.thumb.png.71d0abd105cf0e7b4b844530f5c2028c.png

 

Thanks!

Link to comment
Share on other sites

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Or at least a link to where the broken site is? That way, we can poke around a bit. Troubleshooting a live site is definitely beyond the scope of help we provide here, but we could at least give it a glance to see if theres anything blatantly obvious. 

 

Did you set up your HTML so that you've got a wrapper <div> and content <div> with those IDs applied that you're referencing in the code there? 

 

Also, please don't post links to the ScrollSmoother file you're using - that makes it easy for anyone to steal without having a Club GreenSock membership :)

 

Thanks!

  • Like 1
Link to comment
Share on other sites

Hi @div138

 

What worked for me was:


1. renaming the file ScrollSmoother.min.js to ScrollSmoother.min.txt

2. Upload the .txt file to Webflow

3. Then find the URL of the uploaded .txt file - should look something like this <script src="https://uploads-ssl.webflow.com/62e3acd626f7sd0ac59653c2/6we913e507820a453df444d7_ScrollSmoother.min.txt"></script>

4. It will still be able to read the js inside the .txt file. 

 

Hope that helps :)

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