Laws of nature govern the organic motion of things moving through space over time. We expect that when things go up they always come down in the same way.
When we animate visual elements in web design the animation should feel believable and expected. Web applications make more sense when interactions with elements create motion that mimics things in the real world.
The motion of everything in the real world can be mimicked digitally. The behavior of motion is described with Cubic Bezier Curves. Two curves that look the same may describe a similar motion but at different intensities.
You can throw a ball and describe its very fast initial acceleration with a curve “Expo Ease Out”. If that same ball hits a wall, the velocity is dampened so the curve that returns the ball will be less intense like “Quad Ease Out”.
Some curves describe physical properties of an object like elasticity or bounciness. If that ball finally hits the ground, we would expect it to “Bounce Ease Out” before rolling to a stop with “Sin Ease Out“.
Notice the intensity of motion the ball is described with from the time it’s thrown to the time it stops rolling “Expo → Quad → Sin”. This makes sense because the kinetic energy the ball had at the beginning of the throw quickly diminishes from gravity, impact and friction.
A real world button usually has some sort of spring loaded mechanism behind it. You would expect the button to spring back to life with elasticity if you gave it a quick boop. We can mock this behavior in our digital buttons by animating vertical alignment with “Elastic Ease Out”.
The playfulness of the spring encourages you to press it again. This is a good animation to use on buttons that have no “cooldown” period. Slightly shrink buttons with cooldowns using “Expo Ease Out” and slowly re-inflate them with “Cubic Ease In”.
A more serious button might have some sort of locking mechanism behind it. You would expect the button to feel some resistance on the way down and then lock into place when pressed. We can mock this behavior by animating vertical alignment and scale simultaneously with “Elastic Ease In Out”.
The tightened elasticity feels organic but the rigidness of the animation has a more serious tone. This is a good animation to use for buttons that lock after being pressed to wait on transaction events like a “Purchase”.
In web design the “modal” most commonly enters and exits a scene by fading opacity. But only using opacity for those transitions is jarring and doesn’t tell a story. We can improve the experience by adding some additional motions to fit the context of the modal.
Every modal should be sliding into frame. Choose directions that correspond to different contexts. Errors always slide in from the top. Successes always slide in from the bottom. Required and general purpose modals slide in from the right.
Some modals should have a post enter animation. Choose animations that feel right for different contexts. Errors should shake a little bit after entering frame to show concern. Successes should “Elastic Ease In Out” to animate a excitement or encouragement. Required form modals need a roadrunner type stop with “Bounce Ease Out” to show action needs to be taken before continuing.
Notifications and toasts have similar contexts as our modals and can loosely share these animation patterns.’},
When you browse through content there is an expectation that it will flow in a certain direction and follow a predictable structure. A storyboard driven by animations encourages the consumption in a particular order.
Every content group should be sliding or fading into frame but in relative order of importance. We want to lead their eyes into the first piece of content so they don’t need to figure it out themselves. Expending energy for understanding your information hierarchy is wasted time that could be spent consuming it.
If you’re an online newspaper, start your page load with a headlining story. A big bold title slides in from the bottom followed shortly by the body text of the story. The navigation comes in after from the top. Other news stories and social share buttons fade into view on the sides at the end.
If you’re selling a product, start your page load with a big bright full screen image and their name. A three bullet feature list slides into frame from the side, one point at a time. A big bright call to action button slides in from the bottom. Navigation and footing gently fade into view in the end.
Creating effects on visual elements just for the sake of creating effects can be distracting and confuse your message. Use animations with clear purpose. Build animations that make sense for the components context and accentuate it’s individual message. Use these animations in a storyboard so that the holistic message is delivered with clarity.