ScrollTrigger plugin not registering?

[Drymy 1 Likes (Newbie)]

import { gsap } from "gsap/dist/gsap";

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

gsap.registerPlugin(ScrollTrigger);

 

Hello, i want to try and use ScrollTrigger with React but despite my imports and tries, i keep getting an undefined error  :

TypeError: this is undefined

  790 | var ScrollTrigger = function () {
  791 |   function ScrollTrigger(vars, animation) {
  792 |     _coreInitted || ScrollTrigger.register(gsap) || console.warn("Please gsap.registerPlugin(ScrollTrigger)");
> 793 |     this.init(vars, animation);
      | ^  794 |   }
  795 | 
  796 |   var _proto = ScrollTrigger.prototype;

Can someone explain what i'm doing wrong please? I did install the npm gsap as well

[GreenSock 18,251 Likes (Superhero)]

Welcome to the forums, @Drymy. It sounds like a problem with the way you're actually calling that function. Can you please provide a minimal demo so we can see the problem in context? The simplest possible CodePen, for example, would be great. We just need to be able to reproduce the issue. 

 

My guess is that you've got a strangely-scoped call somewhere in your code, or something like:

// BAD
ScrollTrigger({
  ...
});
  
// GOOD
ScrollTrigger.create({
  ...
});

Again, it's impossible to know without seeing a minimal demo. 🤷‍♂️

[Drymy 1 Likes (Newbie)]

Hello and thank you!

Despite my attempts i cannot manage to make a react codepen for some reason...

I am trying to use this, not in any particular way just the base thing :

https://bitworking.github.io/react-gsap/src-components-scroll-trigger

 

But nothing i tried works sadly for ScrollTrigger. Sorry i cannot put more details, i'll delete / archive the thread if it's not enough.

Have a good day!

[GreenSock 18,251 Likes (Superhero)]

That link is just to some docs, right? We really need to see a minimal demo - can you maybe create one in CodeSandbox.io? I took a very quick shot at it here and it seems to work fine: 

https://codesandbox.io/s/dreamy-mcnulty-f7mkx?file=/src/App.js

 

That "react-gsap" package is NOT a GreenSock product, so we can't really support it here. From glancing at that docs page, it looks like maybe they created a colliding namespace where they've got a "ScrollTrigger" component and you're also trying to import an identically-named "ScrollTrigger" from GSAP (which of course is totally different). I'm quite confident you can use GSAP/ScrollTrigger in React (or any framework). 

 

 

[Drymy 1 Likes (Newbie)]

You're right thank you i ditched the package and everything works now, thank you and sorry for the trouble!