Stacked Card Animation

[Nomili]

I am new to gsap and am just learning some techniques. I came across this stacked card animation from Linktree and wanted to ask if it is possible to build something like this with gsap. I have already tried to realise it, but have already failed with the proper positioning of the cards. When I search the internet for something like this, I find a lot of hits, but they are all horizontal or vertical. not diagonal like in the example. I couldn't find anything about this anywhere. 

Has anyone of you ever built something like this?
 

 

 

See the Pen vYvBMpY by msadak (@msadak) on CodePen

[mvaneijgen]

Hi @Nomili sure that is possible. Just post a minimal demo with what you've already tried and someone will jump in and help you out. If you have multiple example be sure to post them, that way we can see your thought process and thus better help you. 

 

[Nomili]

hey @mvaneijgen thx for your feedback. I updated my post with a minimal codepen. As i said, i'm new in gsap and that's far away from the linktree solution.

[mvaneijgen]

Cool thanks! I don't have time to fully work the demo out at the moment, but I wanted to post this already. For now I've just manually written the logic out, I like to work this way because you can see a pattern emerging then it is just a case of capturing that pattern and writing the code that would loop it. 

 

I don't know if this demo would benefit from the GSAP helper function Seamlessly loop elements along the x-axis https://greensock.com/docs/v3/HelperFunctions the original demo doesn't loop it just has different items that also come in if one leaves. 

 

Side note: You should never apply CSS transitions to anything that JavaScript is animating because not only is it horrible for performance, but it'll prolong all the effects because whenever JavaScript updates a value (which GSAP typically does 60 times per second), the CSS transitions interrupt and say "NOPE! I won't allow that value to be changed right now...instead, I'm gonna slowly make it change over time". So it disrupts things, adds a bunch of load to the CPU because you've now got CSS and JS both fighting over the same properties, but let's say you've got a 1-second tween and the CSS transitions are set to take 1000ms...that means what you intended to take 1 second will actually take 2 seconds to complete. 

 

See the Pen JjwPqXo?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[Nomili]

@mvaneijgen wow, i'm speechless. i've been working on the animation for 2 days and you've done it in no time. Thank you for your detailed description. It is important for me to understand how the code works in detail. How do you define the loop?

My goal is to create 5 cards that have different content and are basically repeated. The approach I took was to hide the first card and then move it to the back and show it again. Elegant is different. 

Also, thanks for the tip about CSS. I will definitely keep that in mind for the future.

[mvaneijgen]

9 minutes ago, Nomili said:

How do you define the loop?

Yep, that is the question, that is now the hard part to figure out and get it working. 

 

10 minutes ago, Nomili said:

My goal is to create 5 cards that have different content and are basically repeated.

This is where the Seamlessly loop elements along the x-axis helper function comes in (check the link) this is just some voodoo magic that makes things seamlessly loop. I've no idea how it works my self, I've never used it before. If I find some time later today I'll take a look at it. 

 

12 minutes ago, Nomili said:

The approach I took was to hide the first card and then move it to the back and show it again. Elegant is different. 

well that is kinda what that function above does. 

 

In the mean time feel free to poke around your self, that is the best way to learn. Personally I use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working.

 

[Nomili]

Your hint with the helper funciton Seamlessly loop elements along the x-axis, has been very helpful. Have a look at my updated codepen. The maps are now repeating, but I can't get the animation to work. But it is an important step in the right direction.

 

[mvaneijgen]

I've just changed .set() to .to() and it is animating.

 

.set() is a zero duration tween, which means it doesn't animate it will just do its thing that instant. 

 

See the Pen VwqZoNL?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[Nomili]

i just wanted to write you at the same time, that i made it :). i am so grateful for your help and advice.   One more thing. Am I mistaken or is the front card pushing through the back ones? Looks like a glitch somehow

[mvaneijgen]

In your CSS the element .slider gets a border: 1px solid #ccc; which is what you are seeing I think

[Nomili]

No, that's not what I mean. I think it's because the front card moves backwards through the other cards. I tried to capture this with a screenshot. You can see in the picture what I mean. The second to last card, which is just before the last card, moves through all the cards, so I think you get the feeling that it looks funny. I think that's why linktree has taken the approach of fading the first map slightly downwards and displaying it again at the back. 

 

 

[mvaneijgen]

11 hours ago, Nomili said:

I think that's why linktree has taken the approach of fading the first map slightly downwards and displaying it again at the back. 

 

Oh yeah, I thought that was the next step in the process. With this example you can go any route you want right? You'll just have to find a way to hook in to before it gets moved scale it down (or whatever animation you want) then when it has moved animate it back in. 

 

I would suggest give it a go. As said before it takes me around 10 versions to get to the final result. If you're stuck just post back here with what you've tried. 

 

[Nomili]

I went back to it last night and adjusted the function moveToNext() { to create the effect. I also removed the interpolate value to define a fixed colour for the maps using css. So far so good, but somehow the scaling and the movement still don't seem round. What exactly am I doing wrong here?

 

Sidenote: i was now able to capture the glitch i was referring to in the previous post via screenshot. The black map moves to the end again and overlaps the grey map. this also happens with the other maps. not always, but often.  

 

See the Pen NWeWbyz by msadak (@msadak) on CodePen

[mvaneijgen]

Entschuldigen, this will be the hard part. I've changed out the setTimeout with a button.

 

setTimeout's are really hard to manage, and it isn't really a fixed timeout you want. You want to autoplay the animation, then wait till everything is done and then start the second loop, a gsap.delayCall() might be a better solution. Right now you have to manage the whole animation between the time out and this is already conflicting, you have a 2 second timeout, but your tween already takes 3.2 seconds ( 0.2 + 0.2 + delay: 2.8),  so this is going to cause conflicts.

 

I'll mark the topic, so some one else can also take a look, because I'm not seeing the solution at the moment.

 

See the Pen mdadRYo?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[Cassie]

Not quite sure I understand what the issue is with your solution, but you could use flip?

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

This thread is also good

 

 

Also if you slow down the video you can see that there's an extra card which makes it easier, and similar to the thread I linked.