Stack cards on top of each other with scroll Trigger.

[Aizy]

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.

[Cassie]

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

[Aizy]

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.

[Cassie]

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

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

 

[Aizy]

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!

 

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

[Aizy]

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

[Cassie]

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

[Aizy]

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

[Prydz]

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 January 30, 2023 by Prydz
answer

[Cassie]

Hi there @Prydz - I just answered on the other thread you opened - lets keep the conversation over there to avoid confusion. Thanks!

[Sanjana Deshmukh]

hey everyone,

 

i  need your help ,

i  want to pin card at top , and overlap on each another , i am using same demo which is given here , but facing one  issue that,

 

i have multiple cards and each card has differant height , small height card can easily get over lap , but card has more content which out of scrren , in that  case  , my card get struct at top , but content in that card if not visible fully , content get hide from down , then i scroll  then next card come on it , this wat happening 

 

i have taken referance of this   

See the Pen NWYVPLM by pixit_design (@pixit_design) on CodePen

        to achive my card stack pin,

 

PLz help me in that. 

[Cassie]

Hi - this pen seems to be working. Can you give us a pen where you've adapted it and it isn't working?

[Sanjana Deshmukh]

hey so i just creted a pin just ignore layout , you can see there some of my cards have too much contnet , but when iit get pin that content is not scrolling it is hide , aftter scrolling next card come , i want to show full contnet of each also it should pin asame time 

 

See the Pen PorqZqB by sanjanad (@sanjanad) on CodePen

 

Plz check here  , plz help me as soon as possible it is very urgent 

 

[mvaneijgen]

Take a look at the following demo it has variable card sizes and scrolls fully through them before showing the next. Hope it helps and happy tweening! 

 

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

[Sanjana Deshmukh]

but in this demo you can see , when i am scrolling the div it is going little down , again same happening for other div , why it is happening , can you tell me.

[Rodrigo]

Hi,

 

I read your post a few times and I'm not clear what you mean by this

8 hours ago, Sanjana Deshmukh said:

when i am scrolling the div it is going little down , again same happening for other div

I'm not seeing any kind of motion on any element besides the fade in/out transitions you have there. Also is worth noticing that your demo has over 2000 lines of CSS and 600 lines of HTML, on top of that you are loading another 3 different CSS files, that's far too much and unfortunately we don't have the time resources to comb through all that and see what could be the issue, is beyond the scope of the help we provide in these free forums and is not really a GSAP related issue, this could be caused by any of those CSS you're adding or something  in your HTML layout.

 

The one thing I can spot is this:

* {
  font-family: "Inter", sans-serif;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  color: #000000;
  transition: all 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
  font-weight: 300;
}

Is a really bad idea to add transition all to every element in your HTML, that means that any change of any CSS property at any given point is going to trigger an animation. My recommendation would be to either be super specific about the elements you want to animate and apply the CSS transitions only to those elements and to the specific properties you want to animate or just use GSAP.

 

Happy Tweening!