Lee Probert

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); } }

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.

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?

Does registering the plugin return a promise? I'm calling `create` immediately afterwards.

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`.

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.

Here's the problem. It all works fine in Codepen. My project is part of a Wordpress PHP template so it is not easy to replicate what is happening. I'll keep chipping away to see if I can work out why it's not tweening the opacity.

Just a thought: the element's CSS is inline. Is that going to override the tween settings on every frame of the animation?

Thank you for the Codepen. I have also had success running a simple tween on the element but it is something about being a part of the `Timeline` that seems to be the problem.

You are right that I was targeting an ID and I corrected this and can confirm that the element was found. I tried variations of `alpha`, `opacity`, and `css:{opacity}` but none of them worked. The durations are percentages of the `ScrollTrigger` (this all works as expected). The only element of the `Timeline` that isn't working is the `<div/>` bit. Everything else works fine.

I have a `ScrollTrigger` animation that is running great to animate my `THREE` scene. But when I try to animate a standard `<div/>` element on the page from the same `Timeline` it does not work. Here's a code snippet: let camera_anim = gsap.timeline(); 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.intersectionPlane.position, { x: intersectionPointPosition.x, y: intersectionPointPosition.y, z: intersectionPointPosition.z, ease: "power1.inOut", duration: 100, }, 'start') .to(this.planeBackgroundMaterial, { opacity: 0, ease: "power1.inOut", duration: 30, }, 70) .to(document.getElementById("header-copy"), { css: {opacity: 1}, opacity: 1, alpha: 1, autoAlpha: 1, ease: "power1.inOut", duration: 30, }, 70); ScrollTrigger.create({ trigger: ".section-header", 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, }); The last element of the `Timeline` is the `<div/>` element. It has a `css` style with `opacity` set to `0` and I just want to fade it in as part of the `ScrollTrigger` - as you can see, I have tried different flavours of opacity tween but none of them work. Have also tried `document.getElementById("header-copy")` as well as just ".header-copy", which is the class name. Anything odd about the code?

I figured out that `duration` is a percentage of the timeline duration so I can adjust the timings easily by setting the main animation with a duration of `100` and the material can be set at `80` or whatever. You can also set the second part of your timeline element to start 10% of the way in by using `10` instead of the label `start`. Good stuff.

I am trying to run two tweens simultaneously using `ScrollTrigger`. I have had success tweening the camera position but I also need to tween the `opacity` value of a material at the same time as the camera tween but with slightly different timings. Here is my code: let camera_anim = gsap.timeline(); camera_anim.add('start') .to(this.camera.position, { x: targetPosition.x, y: targetPosition.y, z: targetPosition.z, ease: "power1.inOut" }, 'start') .to(this.planeBackgroundMaterial, { opacity: 0, ease: "power1.inOut" }, 'start'); ScrollTrigger.create({ trigger: ".section-header", 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, }); The result of this is that I can scroll through the camera position tween but the material's `opacity` takes just as long to fade to zero. I would like the opacity change to only happen between 0 and 250 pixels of the scroll (the camera tweens between 0-500).