Expanding Card

[Sahn]

How can I create a design where cards initially display only their titles (e.g., cars, planes, boats) and are stacked atop one another upon first viewing. As the user scrolls downward, the cards gradually separate. When the user reaches the center of the screen, the top card expands to reveal additional information. Upon further scrolling, the top expanded card closes, and the second card unfolds to display its full content through a sliding downward motion.

So far I have these cards and I tried using gsap.matchMedia() but I think thats wrong.

[mvaneijgen]

Hi @Sahn welcome to the forum!

 

I've written a guide how you can go about creating stacking cardsanimations. There is no example in there that does exactly what you want, but there might be something close, but the logic the post explains allows you to create any card stacking animation, if you're willing to put in some elbow grease. Take a look at the link below and post back here with a minimal demo when you get stuck. Hope it helps and happy tweening! 

 

 

[Rodrigo]

Hi,

 

Maybe this demo can help:

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

 

Happy Tweening!

[Sahn]

On 2/27/2024 at 4:57 PM, Rodrigo said:

Hello,

 

You really got the whole concept down and I tried following your approach. I'm relatively new and still learning all the concepts and I think the start and end values are perhaps causing issues. The only change I did was: end: "1000" and const items = gsap.utils.toArray(".item1 .content1") as HTMLElement[]; because I'm using typescript. Other than that the rest of the code is all the same, it seems to be getting stuck and the first card is open in the beginning and the only animation that is happening is the last one once it hits the end marker. Sometimes when I scroll down the cards, all the cards move to the right too. 

 

 

Happy Tweening!

 

[Rodrigo]

Hi,

 

There is not a lot we can do on a live site, please create a minimal demo, just a few divs, no need for your entire project. You can fork one of these starter templates we have in Stackblitz.

 

This is our NextJS collection
https://stackblitz.com/@GreenSockLearning/collections/gsap-nextjs-starters

 

This is our React collection

https://stackblitz.com/@GreenSockLearning/collections/gsap-react-starters

 

Happy Tweening!

[Sahn]

1 hour ago, Rodrigo said:

Hi,

 

There is not a lot we can do on a live site, please create a minimal demo, just a few divs, no need for your entire project. You can fork one of these starter templates we have in Stackblitz.

 

This is our NextJS collection
https://stackblitz.com/@GreenSockLearning/collections/gsap-nextjs-starters

 

This is our React collection

https://stackblitz.com/@GreenSockLearning/collections/gsap-react-starters

 

Happy Tweening!

https://stackblitz.com/edit/stackblitz-starters-hulwcb?file=app%2Fpage.tsx 

Gotcha, does this work?

[Rodrigo]

Hi,

 

There are several issues in your demo:

1. You're creating your GSAP instances directly in the useLayoutEffect but without any dependencies, that will run everytime and create duplicated instances.
2. You're not using the useGSAP hook that will certainly resolve the first issue.
3. Depending on the screen resolution, your end point is reached before the start point:
   Maybe you want to use a relative value for your end point like "+=1000"
4. Finally there is no scroll space in your demo since the scroll reaches the end before the start point:
   

I strongly recommend you to go to our learning center and read more about our useGSAP hook:

https://gsap.com/resources/React

 

Also check on ScrollTrigger as well:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/

 

Here is a fork of your demo with some modifications:

https://stackblitz.com/edit/stackblitz-starters-v3ox7n?file=app%2Fpage.tsx

 

Hopefully this helps.

Happy Tweening!

[Sahn]

3 hours ago, Rodrigo said:

Hi,

 

There are several issues in your demo:

1. You're creating your GSAP instances directly in the useLayoutEffect but without any dependencies, that will run everytime and create duplicated instances.
2. You're not using the useGSAP hook that will certainly resolve the first issue.
3. Depending on the screen resolution, your end point is reached before the start point:
   Maybe you want to use a relative value for your end point like "+=1000"
4. Finally there is no scroll space in your demo since the scroll reaches the end before the start point:
   

I strongly recommend you to go to our learning center and read more about our useGSAP hook:

https://gsap.com/resources/React

 

Also check on ScrollTrigger as well:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/

 

Here is a fork of your demo with some modifications:

https://stackblitz.com/edit/stackblitz-starters-v3ox7n?file=app%2Fpage.tsx

 

Hopefully this helps.

Happy Tweening!

Thank you so much for showing me the issues! I also realized the parallax I had in my project was creating problems too so I took it out and it works now. Is there a way to use parallax with gsap scrollTrigger components?

[Rodrigo]

14 hours ago, Sahn said:

Is there a way to use parallax with gsap scrollTrigger components?

Sure here are a couple of demos:

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

 

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

 

Happy Tweening!

[Sahn]

Thank you!