Web Animations That Make Clients Pay More

Key Concepts

• Intentional Motion: Animation that is a seamless, purposeful part of the user experience, not just decorative.
• Value-Adding Animation: Motion that enhances engagement, communicates information, elevates perceived quality, or guides users, rather than distracting.
• Purpose, Brand Expression, Cohesion: The three core principles for effective animation decision-making.
• Restraint: The practice of using animation judiciously and avoiding overuse.
• Motion as Body Language: Animation's ability to communicate a brand's personality and tone.
• Unified Motion Language: Consistent use of timing, easing, and direction to create a harmonious animation experience.

Why Use Motion in the First Place?

The video argues that while adding motion to websites is easy with modern tools (Framer, Spline, Lahi, Rive), the true skill lies in understanding why motion should be used and how to make it add meaning. The speaker, Matt Jumper, outlines four key reasons for incorporating animation:

1. To Create a More Engaging, Memorable Experience: This is the most common reason for using animation. Well-executed animations can increase user engagement and leave a positive, lasting impression, potentially impacting metrics like conversions, signups, and retention. While a valid reason, it's crucial to avoid using this as a justification for any animation and to practice restraint. The goal is to make the internet a more fun and memorable place.
2. To Elevate Perceived Quality: Smooth, cohesive, and intentional animation signals craftsmanship and care for the brand and its products. This can build trust, though trust is ultimately a result of the entire user experience (design, copy, product). Motion serves as another proof point that a brand is taken seriously.
3. To Help Communicate: Animation is a powerful communication tool that surpasses static layouts.
   • Scroll tracking animations can tell a story more effectively than static graphics or text.
   • Animated demos are ideal for explaining products or making abstract ideas, benefits, or features tangible.
   • Interactive 3D environments on e-commerce sites can be the most effective way to showcase products. Animation can significantly simplify and amplify the impact of communicating ideas.
4. To Guide and Persuade: Motion can direct user attention, connect different sections of a website, encourage scrolling, and lead users to the next interaction. When used effectively, it helps users stay oriented without conscious effort.
   • Scroll animations can achieve this.
   • Even a simple animated hover state on a button can be more compelling than a static color change, as exemplified by the "lover hate liquid glass" button.
   • Real-time user feedback through intentional motion adds a human element and a high level of polish.

Three Core Principles for Effective Animation

Matt Jumper proposes three fundamental principles that should guide every animation decision to ensure motion serves a clear purpose, stays on brand, and aids users rather than distracting them:

1. Purpose: Every animation must serve one of the "why" reasons discussed above. If the added value (tangible or intangible) cannot be defined, the animation is likely unnecessary noise. If removing it for a day doesn't result in a noticeable loss, it probably shouldn't be there.
2. Brand Expression: Motion acts as a brand's "body language," communicating personality in a way static elements cannot. Animation decisions should perfectly reflect the brand. For instance, a playful brand might use bouncy, energetic motion, while a tech brand might opt for snappy, precise movements. Defining how a brand moves is crucial for intentionality and cohesion.
3. Cohesion: A unified motion language, though often unnoticed when present, is highly apparent when absent. The general guideline is to use similar timing, easing, and direction across the site to create a sense of connection. This doesn't mean every animation must be identical, but rather that they should work harmoniously together, creating an intentional and integrated environment. Limiting the variety of animation types on a site can simplify this process.

Common Mistakes and Pitfalls

The video highlights several common mistakes that stem from "doing too much" with animation:

• Every element fades in: This is overly distracting. The Ramp website is cited as a positive example, where animations are limited to feature graphics and are not applied to every element.
• Too many things moving at once: This can be overwhelming. The Reduct website's bento grid is mentioned, where only one box moves continuously, and others animate on hover.
• Scroll effects for the sake of it: While potentially impressive to other designers, these can slow down users. The HIMS website is presented as an example where aesthetic scroll animations are used sparingly and do not impede scrolling or content consumption.
• Fake preloaders: These are generally discouraged unless they are genuinely preloading content or are so quick that they maintain user attention before they can close the tab.

The Future of Animation and Designer Value

The speaker addresses the evolving landscape of web animation and how designers can differentiate themselves:

• Tools are democratizing animation: With tools like Framer, Spline, Lahi, and Rive, creating animations is becoming accessible to many. Therefore, a designer's value is not solely in mastering these tools.
• Selling the "why" and the strategy:
  • When selling a long, animated storytelling website, the designer should sell their ability to tell a story.
  • When proposing animation for a client's site, the designer should sell their understanding of how to create a successful website and how animation fits into that plan.
  • Alternatively, designers can showcase their ability to create elegant sites with animations that bring a brand to life without being gratuitously flashy.
• Brand goals dictate motion strategy: The example of Amy's website is used. Initially, it featured extensive scroll-based storytelling with complex effects. More recently, it shifted to simplicity with minimal design and clear messaging. Both approaches were beautiful, but the key is understanding which direction aligns with the brand's goals and how to use motion accordingly.

Conclusion

Ultimately, motion is a design decision. Like any good design decision, it should be rooted in an underlying goal, whether that is to communicate an idea, build brand trust, or create moments of delight. In the current digital climate, a delightful website is often characterized by fast loading times, an effortless feel, and elegant, subtle animations that do not impede the user experience.