Jump to content
GreenSock

Jure

Cannot load / register ScrollTrigger 3.10.0 or 3.10.1

Recommended Posts

I simply updated my old scripts (3.9.1) to the new version like this:

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.1/gsap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.1/ScrollTrigger.js"></script>
<script>gsap.registerPlugin(ScrollTrigger);</script>

 

But I get this error in the console (Chrome 100) every time, with 3.10.0 and 3.10.1. I used the non-minified version to get a clearer error, but the same happens with the minified version. I'm running on localhost (http). I also tried downloading the js files and loading them from disk, same error. When I try to load the same scripts in Codepen, I don't get the error.

 

ScrollTrigger.js:205 Uncaught TypeError: Cannot use 'in' operator to search for 'onpointerenter' in null
    at Function._initCore [as register] (ScrollTrigger.js:205:39)
    at _createPlugin (gsap.js:987:31)
    at gsap.js:3517:16
    at Array.forEach (<anonymous>)
    at Object.registerPlugin (gsap.js:3516:12)
    at ScrollTrigger.js:599:22
    at ScrollTrigger.js:4:29
    at ScrollTrigger.js:5:2
_initCore @ ScrollTrigger.js:205
_createPlugin @ gsap.js:987
(anonymous) @ gsap.js:3517
registerPlugin @ gsap.js:3516
(anonymous) @ ScrollTrigger.js:599
(anonymous) @ ScrollTrigger.js:4
(anonymous) @ ScrollTrigger.js:5

parallax-tester:67 Uncaught ReferenceError: ScrollTrigger is not defined
    at parallax-tester:67:29

 

If I click through to the error, this is the line in ScrollTrigger causing it.

 

image.png.5e625fd26c184900e333686dd16b8989.png

 

As soon as I change the version to 3.9.1 everything works again. Any ideas what could be causing this?

Thanks.

Link to comment
Share on other sites

Hi,

Same issue here on scrollTrigger update...

 

Link to comment
Share on other sites

Hey there, sorry that sounds frustrating!

 

Could you offer any more info or a demo maybe?
 

I've just set up a simple local project with the scripts from cloudflare and it's working for me both on codepen and locally.

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

Link to comment
Share on other sites

I'm having the exact same problem

Link to comment
Share on other sites

I've prepared a minimal example with "save as HTML" and some JS files in a subfolder. If I drag this html directly into the browser (`file:///C:/breaks-demo-minimal/breaks.html`), I still get the same error reported.

breaks-demo-minimal.zip

  • Like 1
Link to comment
Share on other sites

I just replaced the scripts I had 3.9.1 to 3.10.1 and I added smooth scroll (just like the in the video) and it just broke

Screenshot 2022-03-31 at 15.54.19.png

  • Like 1
Link to comment
Share on other sites

Interesting , yeah that's not working for me either although the cloudflare links are.

Hold tight! We'll figure this out, apologies for the inconvenience.

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Hey everyone, 

 

Can you try switching the order of your scripts? This seemed to work for me.
 

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.1/ScrollTrigger.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.1/gsap.js"></script>

 

Link to comment
Share on other sites

Or put your scripts at the bottom of your HTML.

 

<html>
  <head>

    <style>
      body {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 200vh;
      }
      .box {
        width: 100px;
        height: 100px;
        background: #000;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.1/gsap.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.1/ScrollTrigger.js"></script>
    <script type="text/javascript">
      gsap.registerPlugin(ScrollTrigger);

      gsap.to(".box", {
        rotate: 360,
        scrollTrigger: {
          box: ".box",
          markers: true,
          scrub: true,
        },
      });
    </script>
  </body>
</html>

 

Link to comment
Share on other sites

I've been testing all morning and had no problems. But my scripts are always at the bottom of the HTML. 🤷‍♂️

  • Like 1
Link to comment
Share on other sites

Ah yeah that's the difference with my demo too. Scripts at the bottom.

Link to comment
Share on other sites

phew ok I'm glad this isn't across the board I was having a mild panic.

Link to comment
Share on other sites

1 minute ago, Cassie said:

phew ok I'm glad this isn't across the board I was having a mild panic.

 

OMG, this was scariest thing to wake up to today. I put so many hours into testing this, and never once thought about putting the scripts at the top.

  • Like 1
Link to comment
Share on other sites

Panic attacks for everyone!

  • Haha 3
Link to comment
Share on other sites

Thanks for the suggestion to put ScrollTrigger *before* gsap while loading scripts, that helped solve my problem.

 

The solution to put scripts at the bottom of HTML isn't practical for a CMS where it's not known in advance which blocks and when will need gsap functionality so I need to load and register things on top - also if people just link to CDN (without hardcoding a version) and their scripts are on top, this will still be an issue I think.

Link to comment
Share on other sites

1 minute ago, Jure said:

he solution to put scripts at the bottom of HTML isn't practical for a CMS where it's not known in advance which blocks and when will need gsap functionality so I need to load and register things on top

 

Did you try switching the order?

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.1/ScrollTrigger.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.1/gsap.js"></script>

 

  • Like 1
Link to comment
Share on other sites

Yes, what I meant by my first sentence is that I still left the scripts on top of the HTML (due to CMS being used) but switching the order (ScrollTrigger first, gsap second) solved my problem.

 

I just meant this might be worth fixing for people who have this running in production and link to latest CDN and might not see this thread.

Link to comment
Share on other sites

Gotcha. We're definitely going to try to patch this up as soon as possible.

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

@OSUblake Switching the order in my header.php(s) worked for me! Great updates! Thanks for all!

Link to comment
Share on other sites

Switching works for me too... Thanks

Link to comment
Share on other sites

Sorry about the confusion! It should be resolved in 3.10.2 which we'll push out soon. 

 

Explanation: 

Observer (which is leveraged inside ScrollTrigger) needs a reference to the document.body to do some stuff. When you load any GSAP plugin, it looks for gsap and if it can find it, it automatically calls gsap.registerPlugin([itself]) as a convenience because it's so common for people to forget to register plugins. So it was doing that here but if you load it in the <head> that means the <body> doesn't even exist yet, thus there's no reference and it breaks. If you load the gsap.min.js file AFTER the plugin, that means that when the plugin loads and checks for gsap to auto-register itself, it doesn't find it so it skips that step. 

 

As a further convenience, when you directly try to use a plugin that hasn't been registered yet (like ScrollTrigger.create() or Observer.create() or Draggable.create()), it'll try at that point to register itself as well, so things still work in that case. So, for example, if someone LOADS ScrollTrigger/Observer/Draggable in the <head> but doesn't actually try to use it until an onload fires or in a script at the bottom of <body>, it'll all be just fine. 

 

I've added code to check for the <body> and skip registration if it doesn't exist yet. The beta files are at: 

Let us know if you notice any other issues. Thanks for reporting this. 

  • Like 2
Link to comment
Share on other sites

4 hours ago, OSUblake said:

 

OMG, this was scariest thing to wake up to today. I put so many hours into testing this, and never once thought about putting the scripts at the top.

Thanks for taking a look at this. On wordpress we put the script in our header. Do you think that's not best practice?

Link to comment
Share on other sites

27 minutes ago, TrulyNewbie said:

Thanks for taking a look at this. On wordpress we put the script in our header. Do you think that's not best practice?

It's fine. We just released a 3.10.2 patch to resolve this, so update and you should be fine. 👍

 

In general, I think it's a best practice to load all JS at the bottom of the <body> because: 

  1. It ensures that the browser can show the DOM as fast as possible (no waiting for JS to load), making your site appear to load faster (users can see things sooner).
  2. Your JS scripts that access DOM elements will be able to find them. If you try to access things on the page from a script that loads and executes in the <head>, nothing in the <body> will exist yet. 

That being said, it's not "wrong" to load things in the <head> - I just think it's more error-prone and gives a worse user experience in most cases. 

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