Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Closing Thoughts
As I mentioned before introducing the principles, while you can learn to improve your transitions and animations by understanding all of them, some are harder to directly work into your designs.
Timing is probably the most important principle when it comes to animating objects on websites. Too fast and you’re back to jarring. Too slow and you could end up annoying visitors if they always have to wait for the animation to complete before performing a task. You have to experiment with different values to find the right balance.
Even slow changes on websites still happen very fast. Slow is relative to instant. Many won’t last long enough to ease in and out of the change. It’s still a good idea to use these timing functions most of the time.
Don’t let the flat design trend lead you into thinking that depth is a bad thing. It isn’t. Quite the opposite. Depth can communicate a lot, and it’s required for things to look realistic. The flat design trend is more a reaction to the overuse of depth and realism that preceded it. Depth used subtly is a good thing.
You can usually find a way to add anticipation and/or follow through to any movement. It should also be subtle most of the time. For example, before a thumbnail image scales up, you might scale it down slightly. Before a panel of icons slides to open into a menu with text links, it might contract a little.
Even color changes can add anticipation and follow through. A dark blue might get darker before getting lighter.
Hopefully this gives you a better idea how you might use these principles in practice. You can apply most of the other principles in some way, though again some are more difficult to add due to the types of things we typically animate on websites.
Don’t let that difficulty stop you. Be creative. When you find a way to overcome the difficulty, you often end up delighting visitors of your site.
You can learn more about transitions, and animations and Disney’s 12 principles in my book, CSS Animations and Transitions for the Modern Web.