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

[PaulGodard]

Hi.  I am totally new to GS. I am watching the ihatetomatoes GS101 – 01 – ScrollTrigger Basics and I get the following error writing the exact same code as in the video.

gsap.registerPlugin(ScrollTrigger);


function init(){
    gsap.to('#intro img', { opacity: 0, scrollTrigger: { trigger: '#intro', start: 'top top', scrub: true, markers: true } })
}

window.addEventListener('load', function(){
    init();
});

after loading the js in the html file

  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollTrigger/1.0.5/ScrollTrigger.min.js"></script>
  <script src="js/main.js" defer></script>

Invalid property scrollTrigger set to

Object { trigger: "#intro", start: "top top", scrub: true, markers: true }

Missing plugin? gsap.registerPlugin()

 

I google the error but can not find what is the problem... most probably a stupid little thing...

Any idea?

 

update... I found that the version of gsap and scrolltrigger could be incompatrible so I change the html file but now nothing is changing when scrolling.

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

 

Edited May 21, 2021 by PaulGodard
update

[OSUblake]

Welcome to forums, @PaulGodard

 

26 minutes ago, PaulGodard said:

most probably a stupid little thing...

 

It happens. Looks like you aren't loading the correct file. That's not GSAP's ScrollTrigger file, just another library that has the same name.

https://terwanerik.github.io/ScrollTrigger/

 

You can load the correct files from here.

https://cdnjs.com/libraries/gsap

[PaulGodard]

Thank you but I am now even more confused.  Can you please tell me which exact link to gsap and scrolltrigger I should use?

[OSUblake]

Look at the name in the link.

 

 

https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/ScrollTrigger.min.js

 

If you need more help, check out the installation docs. It has little helper to show you which files to use.

https://greensock.com/docs/v3/Installation#CDN

 

 

[PaulGodard]

Thank you again.  That is what I changed as indicated in the update of my original post.  So the html file looks like this but it's still does not work.

  <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/ScrollTrigger.min.js'></script>
  <script src = "js/main.js" defer></script>

Looking at the demos, I used the following links and it works.

  <script src='https://unpkg.co/gsap@3/dist/gsap.min.js'></script>
  <script src='https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js'></script>
  <script src = "js/main.js" defer></script>

Weird isnt'it?

[OSUblake]

8 minutes ago, PaulGodard said:

That is what I changed as indicated in the update of my original post.

 

Oh, we don't get notifications if you update your post, so I didn't see that. It's best to just create a new one.

 

I'm not sure why the cdjs links weren't working for you. I just tested them out, and they seem to be working fine here. 🤷‍♂️

 

See the Pen c02b09d41cadd4f8378487ff1d803f7b by osublake (@osublake) on CodePen

 

 

[PaulGodard]

Maybe because I am in Namibia, Africa

Thanks again for your time and noted regarding update!