Jump to content
Search Community

Stack cards on top of each other with scroll Trigger.

Aizy test
Moderator Tag

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

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 2
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

  • 7 months later...

Hey, sorry if I'm not meant to bump this thread but im having difficulties with this.

So what im trying to accomplish is the following:
I have 2 columns. Left column is with content text. And right column is with the corresponding content images which should use scrolltrigger.
 

I want both contents to pin for the duration it takes to show the last image on the right column. I also want the image to slide in from bottom and not from the right x-axis.

 

This is what i have so far

 

See the Pen gOjjyoL by kevmorales (@kevmorales) on CodePen



Not sure how to fix any of that. Any help ? 

 

EDIT: I have managed to make it come from the y-axis (bottom to top) and pin the left column.
same codepen

Edited by Prydz
answer
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.
×
×
  • Create New...