Create a scroll trigger image appearance effect

[Harley Dev]

Hi all,

I want to create a scrolling image effect like this website, but currently,

I can't find any reasonable way to implement it. I've tried many approaches, but it seems unsuccessful.

Please help me, I sincerely appreciate it.

Thank you so much!
Demo web: Prysm Studios Website

See the Pen MWxqEmw by trn-ho-ng-khang (@trn-ho-ng-khang) on CodePen

[Rodrigo]

Hi @Harley Dev and welcome to the GSAP Forums!

 

Your demo actually doesn't have any GSAP implementation in it.

 

What I would suggest you is to go to our Learning Center and check our getting started section:

https://gsap.com/resources/get-started

 

Is far better to just get the animation working the way you intend first and then add ScrollTrigger to the mix. ScrollTrigger only controls a GSAP Tween/Timeline based on the scroll position, nothing more.

 

Finally you can have a look a these demos in order to see how they work:

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

 

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

 

Hopefully this helps.

Happy Tweening!

[Harley Dev]

Hi @Rodrigo

I removed all of my GSAP code because I couldn't find a suitable way to make it work.

Your code snippet really helped me solve the problem

I'm truly grateful to you!