I use scrollTrigger, and I can't see the image.

[goodcontext]

Sometimes you can see an image, sometimes you can't.

You can see it well on the code pen.

But local or github.io I can't see it. There are times when you can see it.

Even if I try this and that, it doesn't work. How can I fix this?

It often works well in chrome.
However, I think there are more times when you can't see it from the edge.

bug_report.zip

See the Pen eYeJEBv by goodcontext (@goodcontext) on CodePen.

[elegantseagulls]

I think your issue is that you're nesting two scroll triggers in a single timeline. You should just be able to use a gsap.from(...) for each one.

[goodcontext]

See the Pen MWOKENx by goodcontext (@goodcontext) on CodePen.

scrollPage.from -> gsap.from
I changed it to, but it doesn't work well.
Thank you for your answer.

 

bug_report02.zip

[OSUblake]

You should probably refresh ScrollTrigger when your images have loaded.

 

window.addEventListener("load", () => {
  ScrollTrigger.refresh()
});

 

[goodcontext]

1 hour ago, OSUblake said:

You should probably refresh ScrollTrigger when your images have loaded.

 

window.addEventListener("load", () => {
  ScrollTrigger.refresh()
});

 

See the Pen vYWLdvX by goodcontext (@goodcontext) on CodePen.

 

Thank you both so much.
I fixed the code and it works perfectly.
Thank you.

result_code.zip