Invalid property scrollTrigger set to.... Missing plugin? gsap.registerPlugin()

[Magiecodes]

I am currently working to integrate gsap into a project. which is a static landing page. I am using a CMS with dojo.js being used (don't even get me started...it is super deprecated)

Currently I am just using two CDN scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js "></script>

which are both being loaded at the bottom of my html, but before my script tag

 

I can get the gsap to load using 

 

window.addEventListener('load', function() {

         gsap.from(".date-image", {

         y: 100,

        duration: 1,

         })

})

 

the ".date-image" animates as expected.

However, if I attempt to register the scrollTrigger plugin it doesn't recognize it.

 

 

gsap.registerPlugin(ScrollTrigger)

console.log("ScrollTrigger:", ScrollTrigger)

 

window.addEventListener('load', function() {

            gsap.from(".date-image", {

              y: 100,

              duration: 1,

             scrollTrigger: {

            trigger: ".date-image",

            start: "top 60%",

             end: "top 30%",

            markers: true,

            scrub: 2,

           toggleActions: "restart none none none",

          }

         })

      })

 

Console: 

Invalid property scrollTrigger set to {trigger: '.date-image', start: 'top 60%', end: 'top 30%', markers: {…}, scrub: 2, …} Missing plugin? gsap.registerPlugin()

I have tried to load the "gsap.registerPlugin(ScrollTrigger) it at different times, to no avail,  and I was hoping that someone might mention how they have loaded the plugin or where they have loaded it?

 

I know that it is preferred that I show a working demo in these forums, however, using a CMS, it's not possible. I'm relatively new in web development and unfortunately the people I work with don't like to help new people, but grateful for resources to try to get some help elsewhere. 

 

 

*Also want to note that the scrollTrigger animation does work as expected if I recreate in Codepen

[OSUblake]

Hi Magiecodes,

 

Troubleshooting a local environment is nearly impossible, especially when everything you are doing looks fine. I even made a test page using everything you provided just so you can see.

 

https://codesandbox.io/s/wizardly-wildflower-45l0b1?file=/index.html

 

There must be something with dojo that is messing something up somehow, but I wouldn't even know where to start. I wish I had better news for you. 😢

 

[Magiecodes]

Sigh, this is what I've feared. I really appreciate you going through the effort to help. Thank you so much!

[elegantseagulls]

Have you tried using ScrollTrigger outside of your timeline?

 

const tl = gsap.from(".date-image", {
	y: 100,
	duration: 1
}

ScrollTrigger.create({
	trigger: ".date-image",
	start: "top 60%",
	end: "top 30%",
	animation: tl,
	scrub: 2,
});

Also, I don't think toggleActions work with scrub/timeline scrollTriggers, so that may be messing you up
 

[Magiecodes]

@elegantseagulls  

 

Thank you for your suggestion! My code above actually works in a local environment, so that part doesn't seem to be the issue. I think the issue is with trying to incorporate gsap with dojo.js and not having the proper configuration. 

[elegantseagulls]

I'd still try it; especially if dojo is trying to minify/obfuscate your code.