Invalid property ScrollTrigger

[marselgray]

I am trying to replicate the codepen linked here to a project I'm working on. I keep getting Invalid property ScrollTrigger in my console logs. I've reviewed other forums of the same problem yet I don't know what I'm doing wrong here. Any help is appreciated, thanks 

 

I have these in my layout file to import gsap:

 

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

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

 

This is my JS file:

 

/* eslint-disable no-unused-vars */

import gsap from 'gsap';

import ScrollTrigger from 'gsap/ScrollTrigger';

 

export default () => {

 

gsap.registerPlugin(ScrollTrigger);

 

gsap.to('.pContent', {

yPercent: -100,

ease: 'none',

markers: true,

scrollTrigger: {

trigger: '.pSection',

// start: 'top bottom', // the default values

// end: 'bottom top',

scrub: true

}

});

 

gsap.to('.pImage', {

yPercent: 50,

ease: 'none',

markers: true,

scrollTrigger: {

trigger: '.pSection',

// start: 'top bottom', // the default values

// end: 'bottom top',

scrub: true

}

});

 

};

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

[mvaneijgen]

Hi @marselgray welcome to the forum! 

 

Seen that you're new I've made a codepen for you, but in the future, please make a codepen to share you're code (even if it's not working), I now had to take 10 minutes of my time to create it for you, I had the time, but most people don't. So anyone that wants to help you needs to first do the work, you are far more likely to get a answer if you share something where people can go straight to answering the question instead of having to set it up them selfs first, just some advice for next time. 

 

You did not share the whole error, maybe you didn't read it all the way. It is really important to read the errors when debugging, because this is what it tells you:

 

"Invalid property" "markers" "set to" true "Missing plugin? gsap.registerPlugin()"

 

Your code should still work (in this case), but the code is telling you something called "markers" is not correct. Do you have anything called markers in your code? You do! What are markers for and where are they from? Markers are a property of ScrollTrigger to visualise the triggers of a particular ScrollTrigger. 

 

I don't know if the code you've copied is coming from the program you're working in, but having indentation is really handy when working with code, that way you can see what properties is part of what. And what you had done is place the markers: true, line of code in your .to() tween, but it should be part of the ScrollTrigger object. Below is a pen where I fixed your second tween but not the first one. Can you see the difference with indentation? Hope it helps and happy tweening! 

 

See the Pen vYQOJXg?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

 

[Cassie]

This was a really good answer @mvaneijgen

Really nicely stepped through 🥰 I like that you phrased it with your own train of thought in finding the source of the error