Jump to content
Search Community

ScrollTrigger error

FrEZ test
Moderator Tag

Recommended Posts

gsap-core.js:89 
        
       Invalid property scrollTrigger set to {trigger: div.fifth-wrap, start: 'top center', end: '+=400', scrub: true, markers: true}end: "+=400"markers: truescrub: truestart: "top center"trigger: div.fifth-wrap[[Prototype]]: Object Missing plugin? gsap.registerPlugin()

 

When I console.log ScrollTrigger I get this
ScrollTrigger2(vars, animation) {
    _coreInitted || ScrollTrigger2.register(gsap) || console.warn("Please gsap.registerPlugin(ScrollTrigger)");
    this.init(vars, animation);

Could the problem come from the fact I am using multiple scrolltriggers?
 

let fifthWrapText = gsap.utils.toArray('.fifth-wrap')
fifthWrapText.forEach((section) => {
  let title = section.querySelector(".business-title");
  let text = section.querySelector(".business-general");
  gsap
    .timeline({
      scrollTrigger: {
        trigger: section,
        start: "top center",
        end: "+=400",
        scrub: true,
        markers: true
      }
    })
 
    .from(title, {
      opacity: 0,
      x: 500
    })
 
    .from(text, {
      xPercent: -120
    });
});
Link to comment
Share on other sites

That error means you didn't register the plugin, so GSAP has no idea what "scrollTrigger" is inside a tween. It thinks you're literally trying to animate a property of your object that's named "scrollTrigger". The solution is hinted at in the error message itself :)

 

gsap.registerPlugin(ScrollTrigger);

 

Link to comment
Share on other sites

10 hours ago, FrEZ said:

gsap.registerPlugin(Observer, ScrollTrigger, ScrollToPlugin);

 

I do register the plugin, just forgot to include it in the code

Hm, it doesn't sound like that is getting executed then. It's very difficult to troubleshoot blind, though - can you please provide a minimal demo that clearly shows the issue? That error definitely means that ScrollTrigger hasn't been registered. 

Link to comment
Share on other sites

12 hours ago, GreenSock said:

Hm, it doesn't sound like that is getting executed then. It's very difficult to troubleshoot blind, though - can you please provide a minimal demo that clearly shows the issue? That error definitely means that ScrollTrigger hasn't been registered. 

See the Pen MWBMWYb?editors=1111 by FrEZy (@FrEZy) on CodePen



The animations aren't the most precise, but the idea is that on codepen everything works fine. On my project it doesn't where it's all the same, except, as I said, I have multiple ScrollTrigger.observe and Observers. Could that be the issue?

Link to comment
Share on other sites

Could I get an actually working prototype of a scrolltrigger in action, so that I can test if it's from my animation? Though I don't get the error in the codepen, the aniamtion as a whole doesn't function. My scroller isn't the body, it's a custom element

Link to comment
Share on other sites

On 2/8/2023 at 10:36 PM, GreenSock said:

Hm, it doesn't sound like that is getting executed then. It's very difficult to troubleshoot blind, though - can you please provide a minimal demo that clearly shows the issue? That error definitely means that ScrollTrigger hasn't been registered. 

See the Pen MWBMWYb?editors=1111 by FrEZy (@FrEZy) on CodePen



The animations aren't the most precise, but the idea is that on codepen everything works fine. On my project it doesn't where it's all the same, except, as I said, I have multiple ScrollTrigger.observe and Observers. Could that be the issue?

 

 

Didn't find a reason why it doesn't work but when I use ScrollTrigger.create it works.

Link to comment
Share on other sites

24 minutes ago, FrEZ said:

The animations aren't the most precise, but the idea is that on codepen everything works fine. On my project it doesn't where it's all the same, except, as I said, I have multiple ScrollTrigger.observe and Observers. Could that be the issue?

No, it doesn't matter how many ScrollTriggers/Observers you've got. The only thing I can think of is if you're creating multiple CONFLICTING ones. Are you using React or something? I wonder if you're not doing proper cleanup. Again, it's very difficult to diagnose blind.

 

Your CodePen had several problems which @Cassie already addressed but your latest demo doesn't seem to incorporate any of her corrections. 

 

Make sure you're using the latest version of GSAP in your local project too. 

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...