Vertical slider with snap and animate text in/out of screen.

[JERA]

I am very new to this, and I don't really understand how to approach this honestly..

 

I'll try to explain what I'm trying to do.

 

Standard page above and below this where you vertically scroll down and then you reach this section.
Slide 1 is already shown. When scroll past center -> snap to slide 2 while pushing slide 1 out the top and setting it's opacity to 0.

Slide 2 is now shown. When past center -> snap to Slide 3 while pushing slide 2 out of the top, and setting its opacity to 0.

When the slides animate "in" they come out the way you scroll if that makes sense, and the opposite when disappearing. 

Scroll down, slide comes from the bottom and disappear out the top ( at the same time)..

Scroll up, slide comes from the top and disappear out the bottom. ( at the same time)..

 

Kind of like "swiping" down a full screen section at a time. where two animations are happening at the same time.

 

 

 

See the Pen GRYvwbB by Jesperransborg (@Jesperransborg) on CodePen

[GreenSock]

I wonder if you're talking about an effect that'd be driven by Observer plugin. Check out the demo from that page:

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

[benpickle]

This example is really helping me a lot. I am trying to use it in the context of a parent div, and have the parent div scroll off the screen after the reveal of the final slide (so rather than infinite scrolling, the entire section containing these slides would pass off the screen vertically after the final slide, and if the user scrolled back to the top, the slides would again animate in reverse order).

 

Does that make sense? Any thoughts on how to make that happen? I was thinking about incorporating the ScrollTrigger plugin to pin and unpin the container div, but not sure hat's the way to go.

[mvaneijgen]

Hi @benpickle welcome to the forum and being a Club Greensock member 🎉

 

Here is a pen which uses ScrollTrigger.observe() an then disables it self and goes over in a ScrollTrigger "normal scroll". Hope it helps and happy tweening! 

 

See the Pen oNdNLxL?editors=0010 by GreenSock (@GreenSock) on CodePen