Jump to content
Search Community

Nice looking staggered card examples?

NickWoodward test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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.

  • Like 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.
×
×
  • Create New...