When translating a design from mockup to functioning features, there might be extra requests from the designer to make the experience just a bit more appealing. One of those common requests are animations - something I've been interested in exploring further. They can seem daunting to engineers who are familiar with making a feature match visually but might not know how to make that feature bounce, skip and shake as well.
I've received quite a bit of animation requests in my time as a developer, both in freelance and as part of my full-time role. They've added delight to the experience in turn improving customer retention. It's been clear to me for some time that animations are a valuable asset to have within a developer's tool belt.
Alongside the animations I've built, I noticed a pattern in many of the ones I've been requested to build. Whether it's having to implement a loading spinner 4 times or make a card enlargement seem natural at least twice, there are clear similarities in the kinds of features wanting to be animated. So, I thought it might be handy to have a stock of some of the most common animations I've been requested to build.
My goal was to make the translation from mockup to feature easier, by building tiny, animated components that can be customized and formed from pieces that allow substitutions. And of course, they must be accessible.
I didn't necessarily want them to just be standalone animations, but work alongside some data, like they will likely do during their implementation. This collection has amounted to becoming a helpful reference point when I've been asked to animate a feature. While building all of them, I also learned some really neat ways to work with CSS and React's animation options.
I decided upon the following ten animations, roughly broken down by their size, (size being defined by how many other atomic components they consist of). The ten include:
| Smaller Animations | Larger Animations |
|---|---|
| Neomorphic button | Accordion |
| Loading spinner | Enlarging a card on hover |
| Progress bar | Selecting a button after appearance |
| Range slider | Menu dropdown |
| "Shaking no" input | Pagination / slider |
You can check out the Storybook listing all the animations under Components, and play around with the knobs.
To implement the animation of your choice, head over to the corresponding folder at src > scripts > components and see how it's built. It should be clear with comments where you can substitute your data and what can be changed.
If these animations helped you in any way, or you need help making sense of them, I'd love to know! Add a new discussion topic, or message me on dev.to.
Enjoy 😊
Top comments (0)