How to: Sections stacked of each other and expanding one by one (with example)

[Novaliz]

On this website are sections stacked of each other and they expand one by one when scrolling. Can you achieve that with GSAP and when how? a small hint would be awesome. Here the link to the website https://www.appart.agency/ and a screenshot of the section I meant:

 

[GSAP Helper]

 

50 minutes ago, Novaliz said:

Can you achieve that with GSAP and when how?

 

The answer verly likely is yes; you could either try ScrollTrigger or Observer - those are the plugins that can help with scroll-related animating.
 

For the 'how'; you could start with inspecting the website you linked in your dev-tools and see what you can find out about the layout or the logic they implemented.

 

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

If you're looking for ScrollTrigger effects, I'd recommend looking at the demos at https://greensock.com/st-demos and https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ - you may be able to use one of those as a jumping-off point. 

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

[Rodrigo]

Hi,

 

Yeah that is not the simplest thing to achieve, but maybe this example could provide a few hints:

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

 

Happy Tweening!

[Novaliz]

32 minutes ago, Rodrigo said:

Hi,

 

Yeah that is not the simplest thing to achieve, but maybe this example could provide a few hints:

 

 

 

Happy Tweening!

Thank you! I need it just the other way that the items start closed and expand when scrolling  Maybe I can figure it out how to do it. Thanks for your time!

[Rodrigo]

Hi,

 

I'd strongly recommend you to create the animation  without ScrollTrigger first. This seems like a case where using a loop or staggers could be helpful.

 

Check this videos @Carl made about staggers and sequences:

They don't show exactly what you're trying to do, but they certainly illustrate the versatility of staggers in situations like this when you  just need to correctly sequence a series of animations.

 

Hopefully this helps.

Happy Tweening!

[Novaliz]

Thank you for your help! I have solved my problem! 😃