Tired of seeing the same old boring animated websites?
to watch & learn from the best.
What makes great interactions feel right?
Animation for Anyone is an educational series focusing on the ideas behind animation. Follow along for ideas and principles that hopefully demystify the animation process.
Showcase of the best Animation Websites. Good web design inspiration from all over the Internet.
Learn the entire design process from idea to final output as we take you through Figma, Cinema 4D and Octane, and Webflow.
The guide introduces web animation techniques with examples and tips on how to use them. Lessons come with pre-designed templates and video tutorials on animating websites on Tilda
An educational project covering the fundamentals of design: typography, grid, color, and animation
In this free course, you’ll learn not only how to animate interfaces well, but also how to do it quickly
Learn web design with free video courses and tutorials
Learn Efficient Design & Prototyping Workflows with InVision Studio.
Users expect a fast reaction from the digital products they’re working with
A basic sticker sheet and workflow for animating user interfaces
A reference table for various effects that are commonly produced using Adobe After Effects. These can be useful for HUD items in games or creating various other effects
The following manifesto represents my answer to the question — “As a UX or UI, designer, how do I know when and where to implement motion to support usability?”
How I taught myself to create 50 pieces of animation in 100 days
Creating a basic animation is simple enough, but what if the goal is to add realism or visual interest?
Learn how to go from a static icon to a fun animation using Illustrator CC and After Effects CC
If you’ve never done animation before don’t worry, it’s actually pretty straightforward. We’ll show you how with a simple 5 step process
The free course will help you overcome AE-related barriers and fears which are standing between you and the wonderful world of animation and motion design
The complete guide to getting 60fps animations with CSS
Practical suggestions to improve your UI micro-interactions
Each animation in an interface tells a micro story, and as a user encounters more and more animations throughout your site or product, these micro stories add up to reveal the personality and story of the brand or product behind them.
As everything integrated into an interface, app animations must be a functional element rather than decor
Obviously, the more details you want to include in your animation, the longer it will take you. But these are the essential techniques you’ll be using most of the time
Useful is better than delightful. After some time thinking and researching I came up with a list of 6 guidelines that I hope can be helpful for your animation endeavours
We interviewed Salih Abdul-Karim, Airbnb’s design lead and animator, to learn how he turned Noun Project’s icons into moving animations with a new tool called Lottie
I just want to collect all the main principles & rules in one place, so that other designers who want to start animating interfaces don’t have to search for additional information
Choosing a right animation technique for each situation allows us to work efficiently and achieve better result
All screenshots © of their respective owners.