Add 'image reveal' effect on scroll

[archimedo]

Hi,

I'm exploring the possibilities of GSAP + scroll trigger and I'd like to build a grid gallery page where images come on view with a fade-in effect (which I was able to achieve with 'gsap.from' function).

I'm also trying to trigger this animation only when images come into the viewport so that If I have a long list, the effect will apply only on elements visible in the screen.

For that I used a scrolltrigger function, with the image container as trigger and start at "top bottom" but unfortunately it seems that I'm missing something here because the effect is still applied to all images on the page at once.

Can you help me figuring out how to fix this?

Thanks!

See the Pen BabaEga by aieio (@aieio) on CodePen

[PointC]

A couple things -  

1. Your demo was missing the ScrollTrigger plugin.
2. You're triggering all animations with the same class at the same time.

You can loop through and create a trigger for each image like this

See the Pen 06cc4d1f848523ff0a28fb6151664226 by PointC (@PointC) on CodePen

 

The problem with that is all the pictures in the same row animate at the same time. That may be what you want, but quite often you want to stagger the targets in each row. 

 

That's the perfect use case for batch.

See the Pen 34fbf1d6bf627411758c1cac157f0d20 by PointC (@PointC) on CodePen

 

More info about batch.

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.batch()/

 

Hopefully that helps. Happy tweening.

 

[archimedo]

thank you so much for your help!

I think the batch can work for my case, however I was noticing in your example that only the first row is shown when the page loads even though the second row would be already visible on the viewport.

is there a way to trigger the animation when items enter the view port? so for instance if there's a long vertical screen the first 3/4rows will be already triggered without even scrolling

[GreenSock]

On 12/24/2023 at 2:31 PM, archimedo said:

I think the batch can work for my case, however I was noticing in your example that only the first row is shown when the page loads even though the second row would be already visible on the viewport.

is there a way to trigger the animation when items enter the view port?

Sure, just change the start: 

// old
start: "top center"

// new
start: "top bottom"