[ScrollTrigger fade in out layered transparent images]

Hi @GreenSock,

 

Yes, exactly like that!!!

 

Thank you so much for the help!

[ScrollTrigger fade in out layered transparent images]

Hi @greensock!

 

Thank you for your reply!

 

1. Yes, I would like "First" to START at opacity: 1.

2. No, I do not want the element pinned.

3. Yes, I do want the animation to start when the element hits the center of the screen and finish by the time the bottom hits the center.

 

I'm happy with everything in my codepen example as it is. The only issue I am having difficulty with is #1 having "First" start at opacity: 1.

 

Thanks for your help!

[ScrollTrigger fade in out layered transparent images]

I'm trying to create a crossfade effect using absolute positioned images.

 

I have everything working how I would like except "First" should already be visible at the start of the animation.

 

Can someone please take a look at my codepen and let me know what it is I'm missing?

 

Thanks in advance!

See the Pen Pomwwar by nancylittle419 (@nancylittle419) on CodePen

[ScrollTrigger fade in out layered images]

Thank you, @Shrug ¯\_(ツ)_/¯

 

You have definitely pointed me in the right direction. I had it working correctly until I changed pin: true to pin: false as I don't want the section to pin.

 

Here's what I have so far: 

See the Pen Pomwwar by nancylittle419 (@nancylittle419) on CodePen

 

Please help!

[ScrollTrigger fade in out layered images]

I'm new to GSAP and need some help.

 

I'm trying to do a simple animation using GSAP and ScrollTrigger.

 

I have a section on the page with 3 layered images. Here is what I'm trying to do:

 

- When the user reaches the trigger begin fading out the first image

- As the user continues to scroll fade in the next image

- As the user continues to scroll even more fade out the second image and fade in the final image

 

Thanks in advance for any help, samples or suggested documenation!