Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
goodcontext

I inserted the ScrollSmoother code, but it doesn't work properly.

Go to solution Solved by GreenSock,

Recommended Posts

Hello.
I have pasted the ScrollSmoother code to the top of the js file.
However, when I press F12 and enter developer mode, an error like a screenshot appears.
And the timeline or ScrollTrigger codes, which were originally working normally, are not working properly.
Why is it like this? I think I did something wrong, but I don't know what it is.

 

The code below is pasted to the top of the js file.

gsap.registerPlugin('ScrollSmoother', 'ScrollTrigger', 'TextPlugin');

const smoother = ScrollSmoother.create({
  wrapper: "#smooth-wrapper",
  content: "#smooth-content",
  smooth: 1,
  normalizeScroll: true, // prevents address bar from showing/hiding on most devices, solves various other browser inconsistencies
  ignoreMobileResize: true, // skips ScrollTrigger.refresh() on mobile resizes from address bar showing/hiding
  effects: true,
  preventDefault: true
 });

error_report.jpg

Link to comment
Share on other sites

It's almost impossible to debug this without a minimal demo. Do you have wrapper and content elements with the id smooth-wrapper and smooth-content in your html?

  • Like 2
Link to comment
Share on other sites

There is a code in HTML.
I thought it would be a common error, so I asked you first.
I'll make a minimal code.
Thank you.

 

<div id="smooth-wrapper">
  <div id="smooth-content">
    The codes are here.
  </div>
</div>

 

Link to comment
Share on other sites

It's weird.
I copied all the HTML, CSS, and JS files into the code pen, uploaded all the image files, and made them exactly the same, but it works well.
So I looked into the head part of the HTML, but I can't find the problem.
ScrollSmoother is the latest version.

Link to comment
Share on other sites

There are two discoveries.

 

1. If you paste the ScrollSmoother code below on top of the js file, the code at the top will not work. However, if you put the code again at the bottom of the js file, some of the code will work, and some of the code will not work.

 

2. If you enter "scroller: '.class_name'" in the timeline, it will work.
But the reason why this doesn't solve it is because I use two timelines, but the positions of the two timelines are far apart, so if the timelines above work, the timelines below seem to start at the same time.

If you scroll down slowly, the timeline below is already run.

 

But it works fine on the code pen.
Why is it like this?

 

gsap.registerPlugin('ScrollSmoother', 'ScrollTrigger', 'TextPlugin');

const smoother = ScrollSmoother.create({
  wrapper: "#smooth-wrapper",
  content: "#smooth-content",
  smooth: 1,
  normalizeScroll: true, // prevents address bar from showing/hiding on most devices, solves various other browser inconsistencies
  ignoreMobileResize: true, // skips ScrollTrigger.refresh() on mobile resizes from address bar showing/hiding
  effects: true,
  preventDefault: true
 });

 

Link to comment
Share on other sites

Please can you fork this minimal demo and add the code you're struggling with. We'll take a look at it as soon as you do. Thanks!

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

  • Like 1
Link to comment
Share on other sites

  • Solution

Hi @goodcontext. It's virtually impossible for us to troubleshoot blind or by just looking at snippets of code. If it works on CodePen but not in your local setup, I would recommend creating a SUPER simple demo locally (literally a <div> or two, colored, just to start). Slowly build it up until it breaks. There's something different between your local setup and CodePen. Unfortunately, we can't possibly tell you what it is but hopefully if you isolate things well, you'll be able to discover what it is. 

 

By the way, this is wrong:

// BAD - don't register strings:
gsap.registerPlugin('ScrollSmoother', 'ScrollTrigger', 'TextPlugin');

// GOOD
gsap.registerPlugin(ScrollTrigger, ScrollSmoother, TextPlugin);

And there's no such thing as "preventDefault" on a ScrollSmoother. That won't break anything - it just gets ignored. 

  • Like 1
Link to comment
Share on other sites

Thank you very much for your answer.
I did it with the GOOD code as you said, and it works properly.
' <- That's why.
Thank you very much.

  • Like 3
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.
×