Possibly not imported ScrollTrigger correctly? Fixed :)

[NickWoodward]

😄

So I'm trying to play around with scroll trigger in a project, and I'm exporting a test function which works fine:
 

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

// Register ScrollTrigger
gsap.registerPlugin(ScrollTrigger);

export const test = () => {
    console.log(ScrollTrigger);
    gsap.from('.about__title', {
        duration: 3, x: '-500px', ease: 'linear'
      });
}

But when I add scroll trigger to the animation:

 

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

// Register ScrollTrigger
gsap.registerPlugin(ScrollTrigger);

export const test = () => {
    console.log(ScrollTrigger);
    gsap.from('.about__title', {
        duration: 3, x: '-500px', ease: 'linear', scrollTrigger:'.about__title'
      });
}

It doesn't work at all 🤷‍♂️

The output of the console log makes me think I've imported it correctly:

ƒ ScrollTrigger(vars, animation) {
      _coreInitted || ScrollTrigger.register(gsap) || console.warn("Please gsap.registerPlugin(ScrollTrigger)");
      this.init(vars, animation);
    }

but I've obviously made a mistake somewhere, was hoping someone could help me spot my mistake please?

Thanks,

Nick

[GreenSock]

Howdy, @NickWoodward. I don't see an obvious mistake, but it's kinda tough to troubleshoot blind. Would you be so kind as to provide a minimal demo, perhaps in CodePen? I think that'll make it much easier to see what's going wrong. 

[NickWoodward]

Hi Jack, I got there eventually 😄

Yeah, I wish I could! But the problem is the code works fine in codepen, which is kind of the reason I'm scratching my head

Any idea on what other steps I could take to troubleshoot it other than the "trusty" console.log? I know it's difficult to do blind, but I'm not sure what I can do. I can't think of why simply removing scrollTrigger: ".about__title" would make any difference, but I guess my next step is putting the code in the main js file 🤷‍♂️

*good to know I haven't made an obvious error though!

[NickWoodward]

Oh.... I know what it must be. I've used CSS for parallax. So I've a container div with an extra scrollbar in it that I've hidden (which is what I'm trying to eventually replace with gsap!), so in effect the window itself isn't scrolling (I think, it's been a while since I looked at it!)

[GreenSock]

Great, so you've got it all figured out now? 

[NickWoodward]

21 minutes ago, GreenSock said:

Great, so you've got it all figured out now? 

Famous last words, but I *think* so - it'll take a while to find out. Thanks though!