Interface Animations and Transitions: where to get inspiration
In UI and UX design every little detail tends to count more and more. Providing the user with small transitions and animations between interface elements is today part of the global user experience of both native application and websites. The great “Transitional Interfaces” shall give you more details on how some small little animation can have a deep impact on user experience. And it’s our job as Web Designer to imagine those interactions. But it might not always be easy, so a little bit of inspiration is always welcome.
On the top of that, it’s always complicated to explain to a client or a front developer what is going on in our mind, how we imagine and see this or this interactions. They are of course great design inspiration galleries, but most of them provide static screenshots of the whole design. So explaining to another human being what is pretty clear in our little head can get tricky.
I found out that it was more easy for me (and maybe for you too) to simply show clients and front-developers examples of the kind of animation or interaction I would like to reproduce for my design. This is way I’ve decided to put together a little list of some great websites that showcase some interaction example and also of some CSS Frameworks I use. I might not use the whole code of the ones I mention above, but most of them are a good starting point to explain to both clients and developers what kind of transition I imagined for their interface.
Last updated: January 19 2015
Interface and Animation Inspiration
This tumblr showcases Vine videos of 6sex Transition and Animation.
Plus point: the site has a tag classification of animations
Minus point: the author creates the movies with his smartphone so it’s not always top quality but you can click on the link to see the “real” site
This tumblr is a galleries of new & interesting interaction design
Plus point: the site has a “filter by category” option and the presentation into browser mockup is pretty clean
Minus point: GIFs can be slow to load due to the weight of the image
This tumblr is also a gallery of interface animations
Plus point: it does not only showcase website but also iOS and even OS X animations
Mins point: no tags or categories (yet ?)
This gallery focuses on UI transition on mobile applications, just hover the example to see the animation. Thanks a lot to J in the comments for this one 🙂
Plus point: the animations are classified into categories of animation style
Minus point: you will only get mobile app animations, but it’s a nice start
This is another tumblr with many screenshot of transitions and animations in webdesign and interface. Big thanks to theolll in the comments
Bonus point: you will find on this site animated GIFs but also short videos
Minus point: no classification is available The site was updated and has now some category tags
I also started my own “collection” of animated GIFs which you can find on iceberg. It’s not the “best” place to do this (no tags, no real links) but it’s a start. If you see other great animation inspiration galleries, don’t hesitate to leave a comment 🙂
Demos and CSS animations Frameworks
I want first to mention that some of those animations are more or less usable on “real” project so you I’ll to pick carefully. Also the goal is not to add an animation for the sake of the animation, but to add a value to the user experience. Last point, I don’t need to remind you to be careful with CSS3 support, so those animations might not work on all browsers 🙂
“A bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.” The animations are classified in categories and you can test them on the little “I fight for the user” element. Bonus point : animate.css has a “custom bluid” option so you can download only the one you really need for your project.
This Framework is inspired by animate.css and offers many animations in different categories. Some are more re-usable than others on real projects. You can test them by clicking on their name.
You get the code via the project’s github. You will need jQuery to trigger the animations, but it might be quite easy to adapt the code for CSS :hover states or VanillaJS.
This library is based on “Page Transitions” from Codrops. ElementTranstions modified some transition to allow them to be applied on different HTML tags. You might not re-use the whole code, but it’s a nice start to see what can be done in CSS and give you some ideas for interactions.
This gallery put together some code from Codrops, CSS Tricks and other great blogs. You will find animation and transitions for modals, buttons, list items and scroll lists, off-canvas navigation, etc.
This site is a “work in progress” and you can even contribute. It’s clearly not here to provide “read to copy paste” codes for nice elements (all the demos are ugly gray) but to give you a nice start to build on.
This one offers a nice little gallery of interactions and animation you can test on a friendly head. Animations are built in CSS3 and work without JS, but you can add jQuery to trigger the animation when the users scrolls on the page to the element. There’s even a nice little demo for that.
This ressource is a git repository of different CSS animations and transitions that are applied on :hover trigger. There’s sorted by type: 2D transitions, background, etc.
And the list goes on …
That’s it, but if you see other libraries or inspiration galleries for interactions please don’t hesitate to share them in the comment section 🙂