When using gsap ScrollSmooter, the site content does not move when scrolling the page

[Igor Cher]

Hello. I have a web site in html, css and js. I am connecting gsap and ScrollSmoother files locally to my project. The problem is that in this project, when scrolling the page, the content remains in place, and the scroll slider on the right side of the page moves.
I connected gsap and ScrollSmoother in the same way and with the same js settings to my other project, and in another project everything works fine.
I checked in my working project, and there the transform: matrix3d() property is added to the "content-scroll" class (this is the content inside the shell) in addition to other properties from ScrollSmoother, and when scrolling the page, the value of this property changes. And in my broken project, all the necessary properties are added to both the "wrapper-scroll" class and the "content-scroll" class, but the transform: matrix3d() property is not added to the "content-scroll" class.

I have attached for your convenience a link to codepen.io , but there is no way to connect library files locally.
I also attached the files of my project (html, css and js), where this problem is just completely clear. Please take a look at the attached project files and help fix this problem.
That is, most likely, some css property in my code breaks the gsap ScrollSmoother functionality. 
I can't find out exactly where the cause of this problem is. Please help me. I will be very grateful

 

See the Pen WNmWqxX by cykfbsud-the-looper (@cykfbsud-the-looper) on CodePen

[Toso]

if thats the real smoother file please remove it , you  made it public and anyone can download it

[Igor Cher]

And how can I fix the problem with a non-working scroll?

[Toso]

thank you for removing it 🙏 , don't worry about your issue I am sure someone will jump to help at any moment but to be honest the demo is not so minimal and hard to debug

[Cassie]

Hi there!

 

Please can you create a minimal demo showing the issue. You can fork this pen and adjust the markup as necessary

See the Pen KKXZOyZ by GreenSock (@GreenSock) on CodePen

Alternatively do you have a link to the live site? We don't usually do this but if it's just a stray CSS class I'm pretty confident I could find the culprit in devtools.

 

 

[Igor Cher]

The essence of the problem: when using gsap ScrollSmoother, when scrolling the site, the content of the site remains in place, and the site slider itself (on the right) scrolls.
I attach a link to the problematic site on github:  https://igcheer.github.io/fyrre/ 

Edited February 21 by Igor Cher

[Cassie]

Thanks for the link - I took a look and all your JS is in the head of the document.

This means that when you call this bit of JS...

ScrollSmoother.create({
 wrapper: '.wrapper-scroll',
 content: '.content-scroll', 
 smooth: 1.6,
 effects: true,
})

The elements that you're referencing don't exist yet.

You can either solve this by moving you JS files to the end of the body or by popping your JS in a DOMContentLoaded event

document.addEventListener("DOMContentLoaded", (event) => {
 // DOM fully loaded and parsed, add your JS here - 
 ScrollSmoother.create({
  wrapper: '.wrapper-scroll',
  content: '.content-scroll', 
  smooth: 1.6,
  effects: true,
 })
  
});

 

Hope this helps!

[Igor Cher]

I tried adding the DOMContentLoaded event, as well as moving the script connection from the head tag to the bottom of the document (before the closing body tag). Unfortunately, none of these methods helped to solve the problem...

[Cassie]

I found your repo here - 

https://github.com/IgCheer/fyrre

I noticed that the ScrollSmoother and ScrollTrigger files had been heavily minified (further than we minify them) and the licensing info at the top had been removed. 😬

Quote

 * ScrollSmoother 3.12.5
 * https://gsap.com
 * 
 * @license Copyright 2024, GreenSock. All rights reserved.
 * This plugin is a membership benefit of Club GSAP and is only authorized for use in sites/apps/products developed by individuals/companies with an active Club GSAP membership. See https://gsap.com/pricing
 * @author: Jack Doyle, jack@greensock.com
 */
 

 

So, some good news first! I swopped in the latest files and the site works fine.

However, This brings me to a slightly awkward conversation - ScrollSmoother is a (paid) club GSAP plugin. If you have an active license this isn't an issue, you can simply just download the latest files to use in the project. However, I don't see a membership on your account.

 

If you acquired these files without realising it was a paid plugin we'd appreciate if you delete that file (even though I think that file is possibly corrupted) or sign up for your own membership for use of the plugins.

 

[Igor Cher]

You surprised me a lot! I took these files from a video tutorial on using gsap ScrollSmoother from YouTube.
I didn't know that these files were somehow modified to circumvent your license agreements. I will, of course, delete them.
I just went to the gsap club page. As far as I understood from there, I can use the club's plugins (including ScrollSmoother) for free, if I do not need a commercial license (for example, I wanted to use this plugin for educational purposes).
But I didn't really understand how to join the gsap club in this way. And you're saying that I'm not in this club.
I would be grateful if you could explain to me if I can use these plugins for free (for educational purposes). And if so, how can this be done?

Edited February 21 by Igor Cher

[Cassie]

For sure! No worries.

Would you happen to have a link to the video, that would be a huge help to make sure no one else gets the corrupted files.
 

Quote

As far as I understood from there, I can use the club's plugins (including ScrollSmoother) for free, if I do not need a commercial license (for example, I wanted to use this plugin for educational purposes).
But I didn't really understand how to join the gsap club in this way. And you're saying that I'm not in this club.
I would be grateful if you could explain to me if I can use these plugins for free (for educational purposes). 

Not quite

 

There are public plugins like ScrollTrigger and club plugins like ScrollSmoother. 

GSAP and the publicly available plugins are free for everyone to use as long as their usage falls under our standard license (most usage does). There are only two reasons you'd need to pay for anything: 

• If you need the special commercial license that comes with Business memberships. This is only necessary if you're using GSAP in a site/product/game/app for which you're charging MULTIPLE customers a fee. See our licensing for details. 
• If you need one of the members-only plugins like ScrollSmoother. 
   

You can use all the plugins for free on codepen, stackblitz and locally with our trial package though 
https://gsap.com/resources/trial/

We also offer discounts to students, so let me know if you're interested in that and I can DM you a coupon code.

Sorry if this was a stressful first encounter with GSAP for you and thanks for deleting that file 💚