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

[ScottTianyi]

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

Edited November 18, 2022 by ScottTianyi

[ScottTianyi]

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

 

[Rodrigo]

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!

[ScottTianyi]

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!

[GreenSock]

ScrollTrigger.refresh() is what makes ScrollTrigger calculate all of its start/end values. It is automatically triggered on DOMContentLoaded and load events, but you can also trigger it manually anytime. I assume you must be loading in content dynamically AFTER the window's "load" event fires, so when ScrollTrigger initially calculates its start/end values, your content hasn't been rendered yet due to your dynamic loading. The solution is to just call ScrollTrigger.refresh() after you're sure that the layout is done shifting around (after your dynamically-loaded content is done rendering). I'm not sure how exactly you're doing things and we just don't have the resources to provide free troubleshooting of live sites, but hopefully this gets you going in the right direction.