Nice looking staggered card examples?

[NickWoodward 46 Likes (Newbie)]

Was just wondering if anyone had any nice examples of cards being staggered? Quite a subjective question I know, but I always struggle to make them in particular look good - they always seem to come out either too aggressively/quickly or too slowly, like each card 'plods' its way out. That feels like a UK word, but it's as it sounds, slow and cumbersome XD

I definitely find it hard to strike a balance, and spending ages looking at the animations is like looking at a word you know well for too long - it starts to look strange either way...

Actually, when making a pen to try and demonstrate my point I found the `slow` ease in your demo graph which I kind of like. Maybe for three cards like this there are better animations than staggers? Idk, I guess I'm just looking for some inspiration that is less 'showcase' and more 'component'/'section', if that makes sense (don't get me wrong, the showcase is awesome, it's just rare I make similar sites)

 

*Edit: The pen below needs to be opened, mobile or stacked animations I don't really have the same issue with so the demo is not small-screen-friendly

 

See the Pen rNrQqbg?editors=1010 by nwoodward (@nwoodward) on CodePen

[mvaneijgen 1,555 Likes (Superhero)]

What I would do in this situation is move all the values to variables, so that I can easily change them. And then its just a matter of keeping changing the values until you've got something you like. Even better yet, you could give it to a colleague/friend and let them change the values. 

 

To me your animation looks fine! Slow, simple.

[NickWoodward 46 Likes (Newbie)]

Hi @mvaneijgen, yeah that's not a bad idea, thanks.

Maybe I should just come back to it with fresh eyes too. I'm sure me from a year ago would be impressed