Section Transition

[Lucas Ramalho]

Hi! I'm new to GSAP and currently I'm trying to do a section interaction.

Here's the Figma Prototype

The whole page is scrollable, but when it gets to this section the user snaps to it, and as you scroll this transition should happen.
I have the sections absolute positioned on top of eachother with z-index of the first one set to 10. All of them are in a div, with 100vh set and overflow hidden.

The website is built on Webflow, but I do have a codepen trying to replicate it.

What would be the best approach here? What is getting me is specially the sections overlapping while mantaining the scroll.

Thanks!

 

See the Pen XWxrgMq by randomgx (@randomgx) on CodePen

[Rodrigo]

Hi @Lucas Ramalho and welcome to the GreenSock forums!

 

Unfortunately we don't have the time resources to build custom solutions or do free consulting for our users. But it seems to me that you're on the right path here. What I would do is create a single container for all the like you're doing now. Set every element, except the first one, to a bigger scale, an opacity of zero and a corresponding z-index, although if you're adding them in the right order they should stack on top of each other correctly. Right now the element added first has a bigger z-index than the one added last. 

 

The thing you should change is create a function that is triggered by the Observer Plugin in order to keep track of the current index of the elements, so obviously start with 0 and create some conditional logic in order to disable your Observer instance based on the current index and the event direction (wheel/touch up or down).

 

Finally in this cases is far better to just get the animation working as you expect and then add ScrollTrigger and Observer to the mix. Trying to get everything working in one sitting is just too hard (trust me many experienced users have been there). This is all I had time to make for now:

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

 

Hopefully that is enough to get you started. You'll have to add the ScrollTrigger part in order to enable the Observer instance (that should be disabled immediately).

Happy Tweening!

[Lucas Ramalho]

That actually helps me a lot! I'll leave the thread open to post the final result and mark your comment as the solution after, but something like this should really help me get into the right track. Thank you so much @Rodrigo!