Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Aizy

Stack cards on top of each other with scroll Trigger.

Go to solution Solved by Cassie,

Recommended Posts

I've been trying to use Scrolltrigger to scroll cards horizontally. I want my cards to stack on top of each other in the center of the screen.
I am using GSAP with Angular but feel free to post solutions in vanilla JS. 

This is the closest I've gotten to achieving the desired results, also it's broken on almost every screen size except 1920.

StackBlitz URL:
GSAP Scroll Trigger for stacked cards - StackBlitz

https://stackblitz.com/edit/ng-zorro-antd-start-3qegqy?file=src/app/app.component.html,src/app/app.component.ts,src/app/app.component.scss

[EDIT] : I am using StackBlitz instead of code pen because StackBlitz provides a working Angular environment with minimal setup required.

Link to comment
Share on other sites

  • Solution

Hi there, welcome to the GSAP forums!

 

This question looks to be purely about the animation so posting a demo using angular is just adding a bit of overhead to the people who may want to help you. 

If you could use this demo as a starting point for more questions that would be hugely helpful - thanks!

note: I'm using invalidateOnRefresh and functional values to make it work on different screen sizes.

 

See the Pen wvyYvXP?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 3
Link to comment
Share on other sites

Thanks for the help @Cassie. And yeah I agree that using Angular added a bit of overhead, I am sorry about that.
The demo works perfectly according to my needs.

  • Like 1
Link to comment
Share on other sites

Oh brilliant. Got it in one go! That's rare.

Pop back if you hit any stumbling blocks, good luck with the project!

 

image.gif

Link to comment
Share on other sites

1 hour ago, Cassie said:

Oh brilliant. Got it in one go! That's rare.

Pop back if you hit any stumbling blocks, good luck with the project!

 

image.gif


Oh, you're gonna see me a lot here now :D .

  • Like 1
Link to comment
Share on other sites

Hi @Cassie. I ran into an issue as expected. The demo you provided works fine, I changed some stuff around to suit my needs. The only problem is that the animation is a bit fast. I want to be able to make it so that the users have to scroll a little more and could read the cards while they are scrolling.

What I tried:
I tried using the "ease:'power3.inOut'", I changed the "end" property to a ridiculous +30000 number which made it move slower as I wanted but introduced a lot of white space around the animation section. I also tried to add the "duration" property which didn't make any difference. I also tried changing the "stagger".
Could you please edit the demo so the cards move a bit slower without adding any unnecessary white space (margin/padding) or guide me to the related documentation?

Here's the updated CodePen:

See the Pen eYVQzpy by Aizazulhaq (@Aizazulhaq) on CodePen

Link to comment
Share on other sites

If it's scrubbed by the scroll, the only value that will make it last longer is the end point. i.e. the distance of the scroll. Everything else, like stagger and duration will just change how the animation is spaced out over that period.

Space will be automatically be added underneath to allow for the user to scroll without the content getting in the way. So if you want to avoid the seeing the space around it - you need to pin a containing element that is higher than the viewPort window.

 

See the Pen BaYGzvR?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Thank you so much @Cassie. You're a lifesaver.

giphy.gif

  • Haha 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×