Animate Sticky elemets as they reveal

[Akash Ranjan]

Hey Guys,

 

I am trying to build an animation where the children elements have position sticky with bottom:0 set. I want to add autoAlpha on each child as they scroll down and settle on their respective places.

 

I have created a minimal pen for it on what I have tried. I also tried gsap.utils to array method but it still not work. Can you please help me.

 

If there is any way that I can achieve this effect without using position sticky that too I can consider.

 

Thanks alot

See the Pen LYapKNX by akashrwx (@akashrwx) on CodePen

[Windpixel]

Hi Akash,

 

Thanks for the minimal demo. Im having a little trouble understanding the end result of what you are trying to achieve.

You want to *add* "Auto Alpha" do you mean tween from 0 - 1 so that it appears? or from 1 to 0 - so the image disappears and  visibility. Also, when you sat their "respective places" what exactly is the place.

Should be able to help more with a little more information.

See the Pen mdoeNMm by windpixel (@windpixel) on CodePen

[Akash Ranjan]

Hey,

 

The effect I am trying to achieve is when the next image start revealing on scroll it should fade in from 0 - 1.

 

Thanks

[GreenSock]

I'm not entirely sure I understand what you're going for, but perhaps something like this?: 

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

 

We don't normally build things for users here (see the forum guidelines), but I wanted to hopefully get you going in a good direction. 

[Akash Ranjan]

Thanks alot. This is exactly what i was looking for