Invalid property ScrollTrigger

[koalainside]

The error:

Invalid property ScrollTrigger set to

Object { trigger: ".c" }

Missing plugin? gsap.registerPlugin()

 

I have included both scripts:

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

and

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

 

Where is the error?

Thanks

See the Pen jOWMWoN by koalainside (@koalainside) on CodePen

[_Greg _]

Use scrollTrigger inside timeline, NOT ScrollTrigger

See the Pen abdmNdy by -greg- (@-greg-) on CodePen

UPD: Check "Simple example" and "Advanced example" on documentation page https://greensock.com/docs/v3/Plugins/ScrollTrigger

[Zain-1997]

thank ，I made the same mistake. 

[Israel Noah]

How do get ScrollTrigger to work having downloaded and using the zip download??

[OSUblake]

You should use the files inside the minified folder.

 

[Israel Noah]

I just did, but still the same missing plugin message I get

[Israel Noah]

Kindly drop a demo if you have on how it would work on a minified file

[OSUblake]

You're going to have to be more specific. What does the message say? And did you register the plugin?

 

[OSUblake]

There's nothing special about how to use minified file. It's just a file.

[OSUblake]

Maybe drop a zip of your project in here. 

[Israel Noah]

Error message:

Invalid property scrollTrigger set to > Object { trigger:".square2"} Missing plugin? gsap.registerPlugin()

 

I have checked that the element is present and the registerPlugin too 

[Israel Noah]

Let me drop the project in afew  you check it out

[OSUblake]

What does your ScrollTrigger code look like? You can verify that ScrollTrigger is loaded by logging it out. 

 

console.log("ScrollTrigger", ScrollTrigger)

 

If it shows something like this, then ScrollTrigger is loading fine and the problem is probably in your code somewhere.

 

 

[Israel Noah]

My file size is 1.6 mbs and here the max size is 500 kb taking me time to scale down cause I also have the gsap member file included..

[Israel Noah]

I'm instead getting a function of scrollTrigger when I console.log it

[OSUblake]

You can send me a private message with your project if you don't want it to be show here.

 

[Israel Noah]

Phewks it works now...I went through my code keenly typing each line, getting the flow and hunt down the bug...thanks OSU Blake for the quick response..I appreciate it..and for the gsock creators and fraternity...big thanks it has made me improve my website's aesthetic features of animations.. it's easier and better..

[Sukrit Saha]

On 6/15/2020 at 8:47 PM, _Greg _ said:

On 2/1/2022 at 3:19 AM, Israel Noah said:

Phewks it works now...I went through my code keenly typing each line, getting the flow and hunt down the bug...thanks OSU Blake for the quick response..I appreciate it..and for the gsock creators and fraternity...big thanks it has made me improve my website's aesthetic features of animations.. it's easier and better..

I am facing the same issue. Can you tell me how did you solve it

 

[Cassie]

Hi there! 

Can you provide a minimal demo showing your code? It's very hard to troubleshoot blind.

As Blake suggests above, a good first step is to log out ScrollTrigger and see what it returns.

 

console.log("ScrollTrigger", ScrollTrigger)

You may need to register the plugin?

 

gsap.registerPlugin(ScrollTrigger)

[Sukrit Saha]

The issue is fixed, it was a silly error.

Thank you for replying though.

[Jordan.]

Please help, I've got the same error but I cannot for the life of me find where my issue is.

 

This is my GSAP JavaScript:

import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'

export default {
  mounted() {
    let foreground = document.querySelector('.foreground')
    let header = document.querySelector('.header')
    let sidebar = document.querySelector('.sidebar')
    let content = document.querySelector('.content')

    gsap.registerPlugin(ScrollTrigger)

    gsap.set(header, { opacity: 0 })
    gsap.set(sidebar, { opacity: 0 })
    gsap.set(content, { opacity: 0 })

    const tlEE = gsap.timeline({
      scrollTrigger: {
        trigger: foreground,
        start: 'center',
        end: 'center-=10',
        scrub: true,
        markers: true
      }
    })

    tlEE
      .to(header, { opacity: 1, duration: 0.5 })
      .to(sidebar, { opacity: 1, duration: 0.5 })
      .to(content, { opacity: 1, duration: 0.5 })
   }
}

 

This is my HTML (Vue.3 and Tailwind CSS):

<template>
  <div class="main h-[100vh]">
    <div class="foreground overflow-hidden absolute">
      <Header class="header" />
      <div class="flex flex-row">
        <Sidebar class="sidebar" />
        <div class="w-[95vw] h-[85vh] grow z-20">
          <AboutMe class="content" />
        </div>
      </div>
    </div>
    <Background class="background absolute" />
  </div>
</template>

Any help will be massively appreciated > 👍

 

This is what I got when I ran "console.log('ScrollTrigger', ScrollTrigger)":

ScrollTrigger ƒ ScrollTrigger3(vars, animation) {
    _coreInitted2 || ScrollTrigger3.register(gsap2) || console.warn("Please gsap.registerPlugin(ScrollTrigger)");
    _context2(this);
    this.init(vars, animation)…

 

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[Jordan.]

23 hours ago, GSAP Helper said:

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

I have tried re creating my issue within GSAP CodePen but I cant seem to get the error, I will give any info needed on my specific problem, it seems that it just doesnt want to work for me, I have the latest version of gsap also.

[Rodrigo]

Hi @Jordan.

 

We have a starter templates collection for Vue3 on Stackblitz:

https://stackblitz.com/@GreenSockLearning/collections/gsap-vue3-starters

 

Feel free to fork one of those in order to show the problem you're facing. Remember to keep your demo as small as possible, we don't have the time resources to traverse through a series of files trying to find the problem, just a few colored divs and the pertinent JS to show the problem.

 

Happy Tweening!

[GreenSock]

Yeah, that error means that somewhere you're creating a tween/timeline with a ScrollTrigger but you haven't loaded/registered ScrollTrigger yet. Don't forget: 

gsap.registerPlugin(ScrollTrigger);

I see that you did that in your sample code, but you must have a component somewhere else that's not doing it properly. Just a guess - it's super difficult to troubleshoot without seeing the problem in context or being able to reproduce it.