Jure Posted March 31, 2022 Share Posted March 31, 2022 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. 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 More sharing options...
SHARLL Posted March 31, 2022 Share Posted March 31, 2022 Hi, Same issue here on scrollTrigger update... Link to comment Share on other sites More sharing options...
Cassie Posted March 31, 2022 Share Posted March 31, 2022 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 More sharing options...
TrulyNewbie Posted March 31, 2022 Share Posted March 31, 2022 I'm having the exact same problem Link to comment Share on other sites More sharing options...
Jure Posted March 31, 2022 Author Share Posted March 31, 2022 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 1 Link to comment Share on other sites More sharing options...
TrulyNewbie Posted March 31, 2022 Share Posted March 31, 2022 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 1 Link to comment Share on other sites More sharing options...
Cassie Posted March 31, 2022 Share Posted March 31, 2022 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. 1 1 Link to comment Share on other sites More sharing options...
OSUblake Posted March 31, 2022 Share Posted March 31, 2022 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 More sharing options...
OSUblake Posted March 31, 2022 Share Posted March 31, 2022 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 More sharing options...
PointC Posted March 31, 2022 Share Posted March 31, 2022 I've been testing all morning and had no problems. But my scripts are always at the bottom of the HTML. 🤷♂️ 1 Link to comment Share on other sites More sharing options...
Cassie Posted March 31, 2022 Share Posted March 31, 2022 Ah yeah that's the difference with my demo too. Scripts at the bottom. Link to comment Share on other sites More sharing options...
Cassie Posted March 31, 2022 Share Posted March 31, 2022 phew ok I'm glad this isn't across the board I was having a mild panic. Link to comment Share on other sites More sharing options...
OSUblake Posted March 31, 2022 Share Posted March 31, 2022 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. 1 Link to comment Share on other sites More sharing options...
Cassie Posted March 31, 2022 Share Posted March 31, 2022 Panic attacks for everyone! 3 Link to comment Share on other sites More sharing options...
Jure Posted March 31, 2022 Author Share Posted March 31, 2022 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 More sharing options...
OSUblake Posted March 31, 2022 Share Posted March 31, 2022 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> 1 Link to comment Share on other sites More sharing options...
Jure Posted March 31, 2022 Author Share Posted March 31, 2022 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 More sharing options...
OSUblake Posted March 31, 2022 Share Posted March 31, 2022 Gotcha. We're definitely going to try to patch this up as soon as possible. 2 1 Link to comment Share on other sites More sharing options...
pietM Posted March 31, 2022 Share Posted March 31, 2022 @OSUblake Switching the order in my header.php(s) worked for me! Great updates! Thanks for all! Link to comment Share on other sites More sharing options...
SHARLL Posted March 31, 2022 Share Posted March 31, 2022 Switching works for me too... Thanks Link to comment Share on other sites More sharing options...
GreenSock Posted March 31, 2022 Share Posted March 31, 2022 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: ScrollTrigger: https://assets.codepen.io/16327/ScrollTrigger.min.js Observer: https://assets.codepen.io/16327/Observer.min.js Let us know if you notice any other issues. Thanks for reporting this. 2 Link to comment Share on other sites More sharing options...
TrulyNewbie Posted March 31, 2022 Share Posted March 31, 2022 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 More sharing options...
GreenSock Posted March 31, 2022 Share Posted March 31, 2022 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: 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). 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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now