Jump to content
Search Community

ScrollTrigger within module

CraigO test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

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

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

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

 

 

 

C-1.PNG

C-2.PNG

C-3.PNG

Link to comment
Share on other sites

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

 

 

 

 

C-5.PNG

Link to comment
Share on other sites

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

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

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. 

  • Like 1
  • Thanks 1
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...