CraigO Posted August 18, 2021 Share Posted August 18, 2021 ScrollTrigger not working within module using Chrome... though works as expected with npm on local server. I have read articles previously recommended by OSUblake about importing modules. Noting also the plugin is registered. Have also tried within the Body Script on a Wordpress page but same issue persists. Final production script needs to be within the Body Script on a Wordpress page. So, seems issue might be how the sketch variable is assigned to the object and then called within onUpdate in the timeline? See the Pen oNWrPLz by craigoh (@craigoh) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted August 18, 2021 Share Posted August 18, 2021 The pen was loading all the GSAP scripts, which was causing a conflict. See the Pen ZEKdMVb by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
CraigO Posted August 18, 2021 Author Share Posted August 18, 2021 Thank you OSUblake... noting the Codepen conflict issue. I tried both ways of loading GSAP + ScrollTrigger into Wordpress on a page -- either (never at the same time) via cdn scripts or imports -- but the same issue persists. The cdn scripts used in Header Scripts on Wordpress page: <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/ScrollTrigger.min.js"></script> No errors display in console. The skypack.dev imports used in Body Scripts within script module on Wordpress page: import { gsap } from 'https://cdn.skypack.dev/gsap'; import { ScrollTrigger } from 'https://cdn.skypack.dev/gsap/ScrollTrigger'; Again, no errors display in console. Final production script needs to be within the Body Script on a Wordpress page. But still not working on Wordpress... could it be a similar conflict issue? Though seems unlikely since cdn scripts and skypack.dev do not bring in all the plugins. Your thoughts? Much appreciated, Craig Link to comment Share on other sites More sharing options...
GreenSock Posted August 19, 2021 Share Posted August 19, 2021 Very difficult to troubleshoot blind, @CraigO - would you please provide a minimal demo? Seems very odd to me that you're not seeing anything in the console and nothing is happening. Are you positive your scripts are even getting executed? Are they getting executed after the page has finished loading? Link to comment Share on other sites More sharing options...
CraigO Posted August 19, 2021 Author Share Posted August 19, 2021 Hey Jack, Thanks for your suggestions... checked that scripts are getting executed after the page has finished loading by adding console.log(sketch) Sketch object displays in the console. Only issue is related to Audit usage of navigator.userAgent, navigator.appVersion, and navigator.platform -- see screenshot. Please see minimal demo supplied previously on this thread and Codepen conflict issue identified and fixed by USOblake - See the Pen ZEKdMVb by GreenSock (@GreenSock) on CodePen Exact same code is put into Wordpress with ScrollTrigger not working. Thoughts? Much appreciated, Craig Link to comment Share on other sites More sharing options...
CraigO Posted August 19, 2021 Author Share Posted August 19, 2021 Hey, I have now managed to get ScrollTrigger working on Wordpress but... scrollTrigger: { trigger: '.wrap', -- stops ScrollTrigger working on Wordpress (the source of my original issue) but works on CodePen trigger: 'wrap', -- ScrollTrigger works on both Wordpress and CodePen trigger: '#wrap', -- ScrollTrigger works on both Wordpress and CodePen trigger: '.container', -- ScrollTrigger works on both Wordpress and CodePen Plus, commenting out the trigger (eg. // trigger: 'anything', ) works on both Wordpress and CodePen. Is this a bug that no trigger is required? Further query arises, on Wordpress, the snap has nil easing -- on Codepen, however, the snap has easing (using the same code )??? Trying to learn what's going on here... much appreciated, Craig Link to comment Share on other sites More sharing options...
Solution OSUblake Posted August 19, 2021 Solution Share Posted August 19, 2021 1 hour ago, CraigO said: I have now managed to get ScrollTrigger working on Wordpress but... scrollTrigger: { trigger: '.wrap', -- stops ScrollTrigger working on Wordpress (the source of my original issue) but works on CodePen trigger: 'wrap', -- ScrollTrigger works on both Wordpress and CodePen trigger: '#wrap', -- ScrollTrigger works on both Wordpress and CodePen trigger: '.container', -- ScrollTrigger works on both Wordpress and CodePen If it works on CodePen, then it's an issue with your WordPress setup. There's really not a lot we can say beyond that. Just make sure it's not messing with the scroll. 1 hour ago, CraigO said: Plus, commenting out the trigger (eg. // trigger: 'anything', ) works on both Wordpress and CodePen. Is this a bug that no trigger is required? It would be the same as creating a standalone trigger. ScrollTrigger.create({ start: "top top", end: "bottom bottom", snap: 1 / (3 - 1), onUpdate({ progress }) { sketch.model.rotation.y = 2 * 3.14 * progress; sketch.model.position.z = -2.6 * Math.sin(3.14 * progress); } }); Also not that the progress value isn't include in the scrub. If you want to "scrub" it, you can do something like this. let proxy = { progress: 0 }; ScrollTrigger.create({ start: "top top", end: "bottom bottom", snap: 1 / (3 - 1), onUpdate({ progress }) { gsap.to(proxy, { progress: progress, ease: "power3", overwrite: true, onUpdate() { sketch.model.rotation.y = 2 * 3.14 * proxy.progress; sketch.model.position.z = -2.6 * Math.sin(3.14 * proxy.progress); } }); } }); 2 1 Link to comment Share on other sites More sharing options...
GreenSock Posted August 19, 2021 Share Posted August 19, 2021 Like Blake said, there's not much we can do if it's working fine in CodePen and you can't provide a minimal demo that shows the problem. You did a console.log(sketch) but that isn't helpful - why don't you try console.log(document.querySelector(".wrap")) right before the GSAP code? Does that find the element you expect? A trigger isn't required - you can simply define standard numeric start/end values. By default, it'll just use the entire root element's scroll area. So it's not a bug that it wasn't requiring a trigger, no. 1 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