Jump to content
Search Community

Cannot load / register ScrollTrigger 3.10.0 or 3.10.1

Jure test

By Jure
in GSAP

Moderator Tag
 Share

Recommended Posts

Jure test

Jure

Posted
Posted

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
OSUblake test

OSUblake

Posted
Posted

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
OSUblake test

OSUblake

Posted
Posted

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
Jure test

Jure

Posted
  • Author
Posted

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
OSUblake test

OSUblake

Posted
Posted
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
Jure test

Jure

Posted
  • Author
Posted

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
GreenSock test

GreenSock

Posted
Posted

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
TrulyNewbie test

TrulyNewbie

Posted
Posted
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
GreenSock test

GreenSock

Posted
Posted
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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...