ScrollTrigger: Show and hide each section step by step by scrolling position

[jenda]

Hello, 

 

I would like to create a similar effect like following website has. Unfortunatelly, by now I'm quite new here and need any help to understand to logic I shall use for this example. I would appreciate to get any inspiration how I can start with it. 

[Cassie]

Hi there!

Just FYI for future readers, that link is broken and the site is - https://www.iambinadam.org/

As for the effect, they're aligning illustrations to make them appear to be 'masked' in. Luckily the animation side is nice and easy - just some simple layered pinning!

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

[jenda]

This is a great solution. Thank you very much.

 

A question: how can I do it that each odd layer comes from top and each even layer comes from bottom? I guess I have to use the timeline and then the pseudo classes nth-child(even) and nth-child(odd). Right?

[Cassie]

Sure, that could work - alternatively you could do a loop and use some conditional logic.

Why don't you give it a a try? If you get stuck feel free to post your attempt here and we can take a look for you.

[Cassie]

Here's a ton of demos that should help you wrap your head around some commonly used techniques.

 

Hope they help.

https://greensock.com/st-demos

[jenda]

well, I got stuck. I tried to do it with the timeline but obviously I cannot understand the logic as well. I guess I have to do a loop for each of the odd and even element? 

 

See the Pen GRMjLqJ by jankout (@jankout) on CodePen

[jenda]

My colleague made this. It seems to be the right solution. What do you think?  

See the Pen mdBRMQy by tarun-uwe (@tarun-uwe) on CodePen

[Cassie]

Looks perfect to me! Nice job. 🥳