Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

ScrollTrigger fade in out layered images

Go to solution Solved by Shrug ¯\_(ツ)_/¯,

Recommended Posts

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!

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

  • Solution

It sounds like you instead want the stack of images to fade through as you scroll? If so then you can remove the pin, try scrub: true, adjust the start &/or end values and play around with the next var (stagger) and fade var . Just play around until you get everything to your liking (if you want to stick with that example). 


On 6/28/2021 at 6:16 PM, LivingInAZoo said:

I'm new to GSAP


The ScrollTrigger Docs have detailed information on those things along with links too many ScrollTrigger examples and demos. I sugggest you take time to get familar with the usage.



  • Like 4
  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.