ScrollTrigger not working

[rdso]

In this codepen link above I am not able to change the images on scroll 

tried a lot of code changes and gsap files from cdn and sequence but it gives error (PFA screenshot)

 

Can someone point out what is missing and get it working

thanks

See the Pen OJGLobb by rakeshdsouza (@rakeshdsouza) on CodePen

[mvaneijgen]

Hi @rdso welcome to the forum!

 

When using ScrollTrigger.create() it is spelled with a capital "S", when using it as an object in a timeline it is scrollTrigger:{} with a lowercase "s". Happens all the time and is indeed weird, but these are Javascript conventions. Always a good idea to reference the docs from time to time and just copy code from there to see what would be different in your setup, but it is indeed hard to spot of you don't know what you are looking for https://gsap.com/docs/v3/Plugins/ScrollTrigger/

 

I've also fixed the stacking of your images, the last image was on top. The latest  element created gets the highest stacking order (this is how CSS works), I've added an extra line to your .set() function which reversed the zIndex of all the elements. 

 

Hope it helps and happy tweening! 

 

See the Pen yLrLJrX?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[rdso]

Hi @mvaneijgen thanks man,

 

I did not realise the S to be capped for the create function, considered the same as scrollTrigger,  such a small thing, 

I went through the same docs too but ignored the caps S, although it should be mentioned in the doc too that this is with caps or else it won't work 😜, so at least there is a tip✅ to consider when we try to trouble shoot...

 

Phew! It is working now, the problem is solved.

 

Thanks once again

[Rodrigo]

4 hours ago, rdso said:

I did not realise the S to be capped for the create function, considered the same as scrollTrigger,  such a small thing, 

Hi, the difference is basically that these are two different things.

 

Lowercase s (scrollTrigger)

// On a Tween
gsap.to(element, {
  x: 200,
  rotation: 360,
  scrollTrigger: { ... }
});

// On a Timeline
gsap.timeline({
  scrollTrigger: { ... }
});

In this case scrollTrigger is just a key on an object, either the Tween or Timeline config object, normally these are camel cased.

 

Uppercase S (ScrollTrigger)

ScrollTrigger.create({
  ...
})

In this case you're accessing the ScrollTrigger object that is either imported or available at the root scope when using either the files you download or the CDN links. In that case you're executing the create method. Of course the ScrollTrigger object other methods, but I'm just pointing the most used one.

 

Hopefully this clear things up.

Happy Tweening!

[rdso]

Hey guys need to make this responsive for mobile... by removing the gsap function and just stacking the image above the relevant content heading. how do I do this?

[Rodrigo]

Hi,

 

GSAP MatchMedia was made for that:

https://gsap.com/docs/v3/GSAP/gsap.matchMedia()

 

Just set your breakpoint and create your GSAP instances only above that breakpoint. Then when the screen size is less than the breakpoint GSAP will revert everything so it would be like nothing ever happened.

 

Hopefully this helps, if you keep having issues, remember to include a minimal demo.

Happy Tweening!