Jump to content
Search Community

ScrollTrigger intermittent success

Lee Probert test
Moderator Tag

Recommended Posts

Firstly, I can't post a demo for this as I think it is related to my code being part of a Wordpress template.

I am using `ScrollTrigger` and have intermittent success with it on my page. I keep refreshing and it is 50/50 whether it works or not.

 

All I need to know so I can debug this and understand what is happening, is how to detect if the `ScrollTrigger` plugin has successfully loaded, and also to error handle the Timeline animation I'm using.

 

`TryCatch` doesn't throw any errors so it is registering the plugin. It doesn't complain about calls to `gsap` or `ScrollTrigger` ... it just doesn't do the animation 50% of the time.

Edited by Lee Probert
additional testing
Link to comment
Share on other sites

Still a demo would be nice, even for your own sanity. I build demo's all the time and when they are done I implement them in to my project, then sometimes things are broken, but I have the original demo to fall back on and I can just compare the two to see what changed. 

 

That said, here are some thing I would try

  1. ScrollTrigger has markers so be sure to turn those on.  (`markers: true`)
  2. You can console.log(gsap) or console.log(ScrollTrigger) to see if they are loaded. 
  3. Manually load the plugins in your head
  4. Put your timeline and ScrollTrigger code directly in your PHP to see if that makes a difference 
Link to comment
Share on other sites

I have a prototype that now sits outside of `Wordpress` ... I get the same issue though. One message that has appeared is this (but not an error):

```

TypeError: gsap.utils.checkPrefix is not a function
    at Function.enable (ScrollTrigger.js:1791:37)
    at Function.register (ScrollTrigger.js:1680:59)
    at new ScrollTrigger (ScrollTrigger.js:820:35)
    at ScrollTrigger.create (ScrollTrigger.js:1930:10)

```

I'll strip this back as much as I can to try and isolate an issue. I am using THREE JS with a ton of other factors so it is tricky to `codepen`.

Link to comment
Share on other sites

I think I'm onto something ... I have the gsap node modules locally in my prototype project. So, I am importing them like this:

<script type="importmap">
			{
				"imports": {
					"three": "https://cdn.jsdelivr.net/npm/three@0.142.0/build/three.module.js",
					"GLTFLoader" : "https://cdn.jsdelivr.net/npm/three@0.142.0/examples/jsm/loaders/GLTFLoader.js",
					"RGBELoader" : "https://cdn.jsdelivr.net/npm/three@0.142.0/examples/jsm/loaders/RGBELoader.js",
					"gsap": "./node_modules/gsap/all.js",
					"ScrollTrigger": "./node_modules/gsap/ScrollTrigger.js",
					"AppController" : "./js/AppController.js"
				  }
			}
			</script>

Note that I am importing `all.js` here. This version works every time.

 

The Wordpress version is slightly different because I'm not using local node modules and have to get it from a CDN. So when I change the URL's to the same as the Wordpress site:

"gsap": "https://cdn.jsdelivr.net/npm/gsap@3.10.4/gsap-core.js",
      "ScrollTrigger": "https://cdn.jsdelivr.net/npm/gsap@3.10.4/ScrollTrigger.js"

then my local prototype doesn't work. And in fact I also get the bonus error:

TypeError: gsap.utils.checkPrefix is not a function
    at Function.enable (ScrollTrigger.js:1791:37)
    at Function.register (ScrollTrigger.js:1680:59)
    at _createPlugin (gsap-core.js:1026:29)
    at gsap-core.js:3794:14
    at Array.forEach (<anonymous>)
    at Object.registerPlugin (gsap-core.js:3793:10)
    at AppController.init (AppController.js:25:18)
    at document.addEventListener.once (app.js:6:9)
    at domContentLoadedCheck (es-module-shims.js:697:16)
    at HTMLDocument.<anonymous> (es-module-shims.js:702:5)

This must be something to do with that version of gsap. I tried to use the latest but then I get module export errors.

 

any ideas?

Link to comment
Share on other sites

I was able to emulate my local prototype in the Wordpress template by accessing the same `node_modules` folder and using the <? php> tags to target the directory. So the two projects are identical now. But, the Wordpress version still fails 50% of the time. So, there's something about how it's loading the modules within the Wordpress site. The next thing to try is to delay the `Scrolltrigger` creation process for a few seconds after the plugin registration to see if this is just because of code not loading fast enough from within Wordpress.

Link to comment
Share on other sites

The problem is that you're loading the gsap-core.js SOURCE file which does NOT include CSSPlugin. You should be loading the /index.js file if you want gsap as a module, not the raw source. In the raw source, we split out CSSPlugin just so that advanced users had the option to exclude CSSPlugin if they're only doing non-DOM/CSS related animating, like canvas objects. But that's extremely rare. 

 

So either load the "normal" gsap file ("index.js", not gsap-core) or you'll need to ALSO load CSSPlugin.js (and don't forget to gsap.registerPlugin(CSSPlugin) too). Does that clear things up? 

  • Like 1
Link to comment
Share on other sites

Thanks for the tip. I updated my import to load the `index.js` file. Honestly though, it didn't make any difference to the problem.

 

A one second delay between registering the plugin and creating the `ScrollTrigger` fixed it. But, I don't know why.

 

try {
        console.log("ATTEMPTING SCROLL TRIGGER");
        let camera_anim = gsap.timeline();
        console.log(gsap);
        camera_anim.add('start')
        .to(this.camera.position, {
          x: targetPosition.x,
          y: targetPosition.y,
          z: targetPosition.z,
          ease: "power1.inOut",
          duration: 100,
        }, 'start')
        .to(this.videoMaterial, {
          opacity: 0,
          ease: "power1.inOut",
          duration: 50,
        }, 30);

        setTimeout(() => {
          ScrollTrigger.create({
              trigger:this.container,
              pin: true,   // pin the trigger element while active
              start: "top top", // when the top of the trigger hits the top of the viewport
              end: "+=500", // end after scrolling 500px beyond the start
              scrub: 1,
              animation: camera_anim,
              onUpdate: self => console.log("progress:", self.progress)
          });
        }, 1000);
        
      } catch (error) {
        console.log(error);
      }
    }

 

Link to comment
Share on other sites

It's almost impossible to troubleshoot effectively without a minimal demo, but my guess is that you're running your code before the targets even exist. Did you make sure  you run your JavaScript in a "load" event handler (or "DOMContentLoaded")? And your 3rd party libraries (Three.js?) already fully loaded an instantiated? 

 

If you still need help, please make sure you provide a minimal demo (like a CodePen or CodeSandbox) and we'd be happy to take a peek. 

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.
×
×
  • Create New...