Jump to content
Search Community

Pinned slide show bound to scroll position?

Thisjustin test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts



I'm new to GreenSock and just trying to wrap my head around it. I have a project where I'd like to have a pinned element display a slide show that progresses with the scroll position. When the end of the slide show is reached the parent element is unpinned. The slides are absolutely positioned on top of one another and then their opacity should change in sequence with the scroll position.


I've been able to get the first transition to occur (although I'd actually like to be able to delay it) as the first slide begins to fade out when the parent element hits the top and gets pinned. After that I get a little lost. My attempts to make the second slide fade out haven't worked as I don't know what to use as a trigger once the parent becomes pinned.


I want to do something like:

start: 'top top-=100%'

So that the start of the second transition occurs after the pinned container reaches the top, but this does not appear to be valid.


Appreciate any advice, perhaps I'm going about this the wrong way? Thanks in advance!

See the Pen zYajeaY by Thisjustin3141 (@Thisjustin3141) on CodePen

Link to comment
Share on other sites

  • Solution

Hi @Thisjustin and welcome to the GreenSock forums!


I think it's easier with a loop for the slides and just a single timeline for each slide using ScrollTrigger's scrub configuration as well.


Here  is a live example:

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


Also, since you are starting with GSAP I strongly recommend you to watch this video by @Cassie in order to get a better grasp of how to create a good working flow when using GSAP and ScrollTrigger on your projects:

Let us know if you have more questions.


Happy Tweening!

  • Like 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.
  • Create New...