12 Principles of Web Animation

A delightful web experience starts even before anything loads, We need the size and roundtrips as minimal as possible, while prioritizing on a First Contentful Paint with no glitches. We also need to preload our heavier assets to make sure they are available as soon as they are needed.

Loading times are critical and since we can't always guarantee a minimal load time (below 2s). We could use custom and engaging loaders, that require as little code and aseets as possible, to increase users' patience, reduce abandonment and tease what's behind the fold.

We could also utilize file types/extensions optimized for the web like woff2, webp and webm, they enable us to have high-quality graphics with really small file sizes.
Caching all our data and preloading subsequent pages also ensures the navigation and whole experience are almost instant.

The Scroll is the Master Timeline of a web experience. A smooth scroll experience leverages the brain's visual processing system, helping users understand what's happening without needing to consume extensive text and graphics, while sustaining curiosity.

We can use scrollytelling to bring content to life as it enters the viewport, using transforms, reveals and avoiding animating properties that are not GPU-accelerated to maintain a smooth and steady 60 fps. We also need to maintain consistency throughout the experience, create predictable patterns by using similar animations for similar interactions, and prioritize user control.

We can't have animations everywhere though, when users become overwhelmed, animations lose their impact. We only need to add animations in places where they enrich the information and show relationships between elements or states.

Our brains are naturally drawn to motion. We can harness this biological response to draw attention to important elements. However, this must be used carefully, as excessive or distracting animations can be annoying and pull users away from their primary task.

Whenever possible, we need to give users unique experiences. Easter eggs are also a really good way to trigger positive emotions without affecting or hindering the rest of the website.

When users feel something through an animation, it connects to their limbic system, which helps create memorable and engaging experiences. We can use animations to trigger pleasure, empathy, joy, and satisfaction and also chase away the negative emotions. We can reduce constant focus shifts by smoothly transitioning between different contexts, reduce anxiety by maintaining consistency and following intuitive conventions, and reduce cognitive overload by gracefully introducing new content.

This principle involves animating elements as they change from one form or state to another, maintaining a visual connection to their origin. This minimizes the need for users to readjust mentally, helps them understand the relationship between different elements, conserves space, and sometimes simply adding extra delight.

We can use seamless page transitions to maintain a sense of continuity, allowing users to see that elements are moving and changing rather than simply disappearing and reappearing. We leverage visual continuity by keeping shared elements visible and animating only their movement.

We could approach complex animations by building out all elements and their potential states first. The animation then simply becomes a way to reveal or transform them over time.

Grace is simply smoothness and elegance in movement. A good animation should be invisible, not drawing undue attention to itself, graceful, interruptible, and should always respecting user preferences.

The less work the browser has to do, the better the performance. If our animations are not smooth and performant, they end up playing a counterproductive role in the web experience.

Interruptibility is the readiness for animations to be halted or rerouted instantly. Making sure our animations are always interruptible makes them feel more natural and responsive. We also need to ensure that if animations are disabled entirely and despite the type of device, users can still enjoy a full experience.

This principle focuses on quantifying motion using position, displacement, velocity, and acceleration over time, without considering the forces causing them.

Because nothing in the physical world changes instantly, when animating, we should generally start and end slowly, with acceleration in the middle, creating a more natural feel. This behavior is usually controlled by an easing curve

Easing is by far the most important part of most animations. It is often the sole difference between a good, bad, or great animation. Mastering how to create, decide and use the right easing curves is a non-negotiable.

We typically want to ease in and out for most animations happening on-screen, however, exceptions apply based on the element's origin and destination. When elements arrive from an unseen or void state, they are already moving so we ignore the ease in and simply ease out or decelerate to a stop, and when elements leave to an unseen or void state, they should not slow down before disappearing.

Every animation must serve a clear goal, such as providing feedback, guiding user focus, explaining functionality, or enhancing storytelling. We need to keep animations brief and subtle to enhance, not overwhelm the experience. Distracting animations often feel like clumsy afterthoughts.

Before adding any animation, we must consider how frequently users will see and interact with it. This principle dictates that we need to know when to add an animation, why, and when not to. The primary focus should always be on necessity and utility, ensuring the animation doesn't do more harm than good.

Sometimes, the sole purpose of an animation could be to bring delight and that is perfectly valid, especially if the goal was always to create a delightful experience.

The primary purpose of a website has always been to facilitate the sharing, access, and exchange of information globally and we can achieve that easier through stories.

We can use real-time data for dynamic storytelling, allowing users to manipulate variables and see immediate changes. Scrollytelling is another effective form of storytelling on the web, where the scroll reveals the narrative gradually while keeping the user in control.

Interactive experiences generally turn the user into a character in the story, making the journey engaging, memorable, and conducive to virtually any goal.

Animations should be fast, especially for frequently used elements. Although perceived speed varies based on the easing and size of element, a duration between 100ms and 300ms is usually the sweet spot

When an action is triggered by human interaction, the websites must provide immediate feedback. To make our website feel more responsive, we should significantly reduce the duration of animations, avoid easing them in or even remove animations entirely to prevent user fatigue if need be.

Websites should also subtly "hint" at the outcome of interactions. This makes actions feel expected and predictable. Feedback helps to drive the user's attention to the relevant part of our website and confirms their status within the experience. It should answer all their questions regarding "Where, When, and How."

To bring our websites to life, our elements and animations should possess the qualities of living matter, being able 'metabolize', 'reproduce', grow, and respond to environmental stimuli.

We should infer relationships between elements and events without requiring direct human input. This involves using secondary information and actions, magnetic fields, self-triggered animations, and adaptive cursors.

Our website should be resilient, it should have the ability to reset after disruptions, acknowledge causation and provide users with rewards (or consequences) as they interact with it

No website is ever standalone. It is an extension of a product, service, brand, or even its creators. Therefore, we must leverage motion design languages, principles, and guidelines to ensure consistency and maintain a sense of continuity.

We must make conscious decisions about how and when elements move. Without a distinct motion language, websites feel generic and lose their memorability.

To enforce brand personality, we can aslo add animations solely for decoration. These serve to subconsciously embed the brand's essence into the user's mind.

Beyond simple kinematics, we should apply the laws of physics to our animations, like weight, inertia, bounce, elasticity and friction. The goal is to mimick and simulate how objects move and react in the real world so accurately that the animation feels fluid and "real".

Beyond physics, there is also room to explore Augmented Reality, overlaying digital information onto the real world environment, we could visualize our websites as if they were actually in front of us, utilizing virtual interactions, spatial sound, and voice commands.

We are limited only by current technology, but that barrier grows thinner every day. AR makes complex concepts tangible, reducing cognitive load to near zero and shooting accessibility through the roof. We can already integrate some concepts with concepts like allowing users to interact with 3D elements, and adding sound design to our experiences.

Web Animation could serve as the bridge between websites and the human mind. It is the difference between a user simply viewing content and truly experiencing it.

These principles are not rigid laws, not even for me, and we certainly don't have to use them all together. The core mission remains to create delightful experiences and when used with purpose and grace, we stop building mere websites and start building web portals and worlds