Jump to content
Search Community

CraigO

Members
  • Posts

    6
  • Joined

  • Last visited

CraigO's Achievements

  • One Month Later
  • One Year In
  • Week One Done

Recent Badges

0

Reputation

  1. 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? https://codepen.io/craigoh/pen/oNWrPLz 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
  2. 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 - ttps://codepen.io/GreenSock/pen/ZEKdMVb Exact same code is put into Wordpress with ScrollTrigger not working. Thoughts? Much appreciated, Craig
  3. 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
  4. 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?
  5. I followed the solution by OSUblake on how to use imports as a CDN within <script type="module"> to import GSAP. I also added the required registration of gsap.registerPlugin(ScrollTrigger); but console error states that ScrollTrigger is undefined. I did not find any reference on skypack.dev on how to separately import ScrollTrigger plugin. Does the cdn import from skypack.dev for GSAP also include ScrollTrigger or does it need to be imported separately ?
  6. CraigO

    How to use GSAP in NPM

    I have followed the solution given above by OSUblake to use imports as a CDN within my <script type="module"> I also added the required registration of gsap.registerPlugin(ScrollTrigger); But console error still states that ScrollTrigger is not undefined. I did not find any reference on skypack.dev on how to also import ScrollTrigger plugin. Does the cdn import from skypack.dev for GSAP also include the ScrollTrigger plugin or is it a separate import?
×
×
  • Create New...