[my scrollTrigger won't trigger the element until I resized the screen, why does it happen?]

53 minutes ago, Rodrigo said:

Hi @ScottTianyi and welcome to the GreenSock forums!

 

Is really hard for us to debug a live site, hence the need for a minimal demo. If you look at the console you'll see this warning by GSAP though:
Invalid property opaity set to 0 Missing plugin? gsap.registerPlugin() 

That basically means that in a GSAP instance you have this:

gsap.to(myElement, { opaity: 0 });

So those animations definitely are not going to work.

 

Finally when working with ScrollTrigger during development always set the markers config to true in order to see where your ScrollTrigger instances are starting and ending.

 

Let us know if you have more questions.

 

Happy Tweening!

Thank you so much Sir! but it seems not working. I'm totally new to the GSAP, thank you again for your great patience! I just updated my codepen.io code, you can see all the code directly this time! My problem is when I trigger 'content 3' , the start/end button will detect the content3 position automatically, it works in codepen.io, but doesn't work on my visual studio, the same code will look like this on my laptop

they are just overlapping and positioned on the top of the screen. Why does this happen? and if I trigger 'content3', all the content3 will become invisible until i refresh and resize the screen. Thank you so much for helping!

[my scrollTrigger won't trigger the element until I resized the screen, why does it happen?]

Here is the website URL: https://home-gsp.netlify.app/

 

[my scrollTrigger won't trigger the element until I resized the screen, why does it happen?]

Every-time I refresh the page, the trigger content will disappear. I need to resize the screensize to update the start/end position to let the triggered content being displayed, just wanna know why this happens and how an I avoid it? Thank you so much for helping!!

See the Pen OJEOPwa by ScottTianyi (@ScottTianyi) on CodePen