GSAP Stacked Animation Card

[yzhe819]

Hello guys, I am trying to create something similar to this website. https://www.cieffemilano.it/

 

I found a project similar to stacked card, the difference is that the following one scrolls down to form stacked cards.

But my goal is to create a stack of cards that can be updated/switched by scrolling.

 

I am facing two issues

1. How to create this stacked card in gsap?
2. How to do the update by using scrollTrigger?

 

Thank you all in advance for help ❤️. This animation has me stuck for a week.

See the Pen bGjBEdO by akapowl (@akapowl) on CodePen

[mvaneijgen]

Hi @yzhe819 welcome to the forum!

 

The example you've linked more looks like they are using the Observer plugin https://greensock.com/docs/v3/Plugins/Observer If you scroll a little or a lot it only advances one slide. It kinda looks like the demo bellow form the docs, but then in card form.

 

Either way the most important thing when working with GSAP is the animation. If you have not yet created the animation you want to animate with ScrollTrigger or in this case the Observer plugin, you'll need to take a step back and focus on the animation at first, otherwise it's like learning to run before you can walk! 

 

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

 

Also take a look at the video below it explains how to work with ScrollTrigger, but the same applies for working with the Observer plugin. Next time post some code you've made, so that we can see what and how you're thinking and thus better help you. Hope it helps and happy tweening!