Add ScrollSmoother to webflow

[Robinaerts]

Hi,

 

I'm trying to add the ScrollSmoother to my Webflow project but I can't get it to work. Has anyone some tips for me how to do this?

 

 

[Cassie]

I don't have any understanding of webflow - but if you can list what you've tried maybe we can advise?

[Cassie]

I think this may be what you're looking for? 

https://university.webflow.com/lesson/custom-code-in-the-head-and-body-tags

 

Quote

Why can't I add long code?

Custom code in each section cannot be longer than 10,000 characters. If the code you want to place on your site is longer, you can store it on another server and then embed it as a script file.

 

[Robinaerts]

Hi Cassie, 

 

I have imported the gsap library and scrolltriger library so you can see in the picture. I have setup a github account to host the smoothscroller script and used jsdeliver to add the code to my project because in webflow you cannot have more than 10.000 charachters. I added the code to activate the scrolltrigger and smoothscroller and I have set up 2 divs 1 with id "#smooth-wrapper" and the other with "#smooth-content" but it stil not work.

 

This is the project I'm working on:

https://webflow.com/design/reflect-media?pageId=624923d83fb51e8116295f99

 

Some pictures:

 

 

[PointC]

That's a different ScrollTrigger. Same name but not a GSAP product. You should have this one.

 

https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.2/ScrollTrigger.min.js

Happy tweening.

[Robinaerts]

11 minutes ago, PointC said:

That's a different ScrollTrigger. Same name but not a GSAP product. You should have this one.

 

https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.2/ScrollTrigger.min.js

Happy tweening.

Thanks I have changed that one! But unfortunately it is still not working..

[GreenSock]

It looks to me like you're not loading ScrollSmoother.  Or am I missing it? 

 

[Cassie]

Ah! It says 'before body tag' in your screenshot 👀

You need the JS to be after the body tag otherwise you're asking ScrollSmoother to look for the DOM and set everything up before it exists.

[PointC]

10 minutes ago, GreenSock said:

It looks to me like you're not loading ScrollSmoother.  Or am I missing it? 

It's there in the screenshot as the 3rd script. It's just been renamed. I followed that link and it is indeed ScrollSmoother 3.10.2.

 

7 minutes ago, Cassie said:

Ah! It says 'before body tag' in your screenshot

I assumed that meant at the bottom of the page since it's the closing tag for the body in the screenshot. Exactly where you'd want them. But maybe I'm wrong.🤷‍♂️

 

I tried looking at the webflow project, but it forces you to set up an account and I'm not gonna do that. 

[GreenSock]

14 minutes ago, PointC said:

It's there in the screenshot as the 3rd script. It's just been renamed. I followed that link and it is indeed ScrollSmoother 3.10.2.

Oh, that's not good...

1. You're sharing a link to the raw source code so it's granting everyone on the web access to an unprotected members-only plugin. I'm gonna delete that screenshot for now. 
2. That's an ES6 file and the screenshot is chopped so I can't see if you properly set type="module". You should probably be using the file that ends in .min.js (the minified, ES5 file that's compatible with all browsers). 

16 minutes ago, PointC said:

I tried looking at the webflow project, but it forces you to set up an account and I'm not gonna do that. 

Same here.