As I’ve explored in previous articles, using animations in web design is pretty standard these days. Subtle movements make for a dynamic and interactive experience. Yes, it can definitely be overdone but, generally, animation improves UX and can bring interfaces and normally static content to life. UX as a field has grown substantially the past decade. So much has been simplified and refined. I’ll cover some of the basics of that refinement and give some practical examples and advice.
Flash Death
The tools we have available to us, with the relatively simple use of CSS, enhance user engagement, guide users through content, and create more visually appealing websites. Techniques have evolved significantly since I started out. The addition of animation properties to stylesheets with the release of CSS3 was a game changer. It seemed like the new properties were mastered relatively quickly, but it was a few years until I noticed real widespread use. The new tools were incredible and at that point, flash was losing support daily. It had mostly become the butt of jokes and a security risk.
It’s true that some basic animation was possible before, but it required a lot more time and effort. Like I said, Flash was mostly dead by the time CSS3 was publicly released. Really, it was a long time coming. Luckily, we don’t have to worry about Internet Explorer or Flash’s compatibility with iOS these days. Today, it’s almost as simple as a couple lines of CSS.
CSS Animations
CSS provides a powerful and efficient way to animate elements on a web page. These animation properties allow you to create smooth transitions, transform objects, and add motion to various elements without the need for complex scripting or external libraries. One of the key advantages of CSS animations is their ability to run natively in modern browsers, ensuring optimal performance and compatibility.
To create a CSS animation, you define keyframes that specify the start and end states of the animation, as well as any intermediate steps. Keyframe properties like animation-name, animation-duration, and animation-timing-function can be applied to HTML elements using CSS. They can be triggered by user interactions, such as hovering over an element or scrolling down the page.
Creating smooth transitions
Timing Functions
The transition-timing-function property allows you to control the acceleration curve of the animation. The ease value is the default, but you can use other values like linear, ease-in, ease-out, ease-in-out, or custom cubic-bezier functions to achieve different acceleration patterns.
This can make transitions appear smoother and more natural.
transition-timing-function: ease-in-out;Transition Duration
The transition-duration property specifies the length of time the transition should take. Longer durations generally appear smoother than abrupt changes. However, be careful not to make the duration too long, as it can make the animation feel sluggish.
transition-duration: 0.5s;Delay Transitions
Adding a slight transition-delay can help create a smoother transition, especially when dealing with hover effects. This prevents the transition from being retriggered immediately when the mouse moves slightly.
transition-delay: 0.1s;Hardware Acceleration
Enabling hardware acceleration by using transform or opacity properties can improve animation performance and make transitions appear smoother, especially on lower-end devices.
transition: transform 0.5s ease-in-out;Staggered Animations
For complex animations involving multiple elements, consider staggering the start times of each element’s animation. This can create a smoother, more natural flow and prevent abrupt changes.
Optimize Performance
Reducing the number of animated properties, minimizing layout reflows, and using techniques like will-change can improve overall performance and contribute to smoother animations.
Keyframe Animations
For more complex animations, consider using keyframe animations (@keyframes) instead of transitions. Keyframes allow you to define multiple intermediate steps and provide more control over the animation sequence.
SVG Animations
SVG’s offer another approach. Animating vector graphics, icons, and illustrations on your website is useful as crispness on super high-resolution displays is very noticeable. I’ guessing that most of the readers of this article probably know that unlike raster images, SVG graphics can be scaled to any size without losing quality, making them perfect for responsive web design.
SVG animations can be created using various techniques, including CSS animations, JavaScript, and SMIL (Synchronized Multimedia Integration Language). Like CSS animation properties, SMIL can allow you to define animation timelines, motion paths, and transformations with precise control.
One of the advantages of using SVG’s are the usually small/lightweight file sizes. SVG graphics can be embedded directly into HTML documents or referenced as external files. Again, most of you reading this have probably used SVG’s regularly for a while, but if you haven’t, you should explore using them more in your builds.
Practice makes perfect! Follow these techniques to create smooth, high-performance motion that enhances UX in your projects:
Optimizing SVG Path Data
Match Anchor Points: For smooth transitions between different SVG shapes, ensure that the number of anchor points and their types (straight or curved) match across all paths involved. This allows for interpolation between the paths.
Simplify Paths: Reduce the number of anchor points in your SVG paths while maintaining the desired shape. Fewer points result in smoother motion and better performance.
Use Relative Path Commands: Instead of absolute coordinates, use relative path commands (e.g., l, c, q) to define your paths. This can make the path data more concise and easier to manipulate.
CSS Animations
Use CSS Animations: Use CSS animations to animate SVG properties like stroke, fill, opacity, and transform. CSS animations are hardware-accelerated and can provide smooth transitions.
Keyframe Animations: Define keyframes in your CSS to specify the start and end states of the animation, as well as any intermediate steps.
Timing Functions: Experiment with different timing functions (e.g., ease, ease-in-out, cubic-bezier) to control the acceleration and deceleration of the animation, creating more natural-looking movements.
JavaScript Animations
requestAnimationFrame: For complex animations or those requiring precise timing, use the requestAnimationFrame method in JavaScript. This ensures smooth rendering by synchronizing animations with the browser’s refresh rate.
Interpolation Libraries: Consider using libraries like GreenSock (GSAP) or Anime.js, which provide advanced interpolation and easing functions for creating smooth SVG animations.
Performance Optimization
Minimize DOM Manipulation: Avoid frequent DOM manipulation, as it can negatively impact performance. Instead, update SVG properties directly or use techniques like Virtual DOM for complex animations.
Code Splitting: If your SVG animations are non-critical, consider loading them asynchronously or on-demand to improve initial page load times.
Compression and Optimization: Minify and optimize your SVG files to reduce file size, which can improve load times and overall performance.
Lazy Loading: Implement lazy loading techniques to load SVG animations only when they are visible in the viewport, reducing initial load times.
General Best Practices for Web Animations
Animations can enhance user experiences so much. It’s essential, however, to follow best practices to ensure they are effective and unobtrusive. Keep it subtle. I’ve seen some pretty badass animations out there that add to the atmosphere of a website. I recently saw a design studio using a simple, long CSS animation that looped a kind of content break of a swaying silhouette of a pine forest across the width of the screen. So, it’s possible to come up with original use cases aside from just fades and slides. Use your imagination!
Now that you know a bit about both CSS and SVG animations, how to use them and how to make them look pretty, let’s take a look at some general best practices.
That said, here are some guidelines to keep in mind for all the animation use cases I’ve talked about so far:
Performance Optimization
Animations can impact website performance, especially on lower-end devices or slower internet connections. Optimize your animations by minimizing the number of elements being animated, using hardware acceleration when possible, and considering the use of requestAnimationFrame for smoother animations.
Accessibility
Ensure that your animations are accessible to users with disabilities or those who prefer reduced motion. Provide options to disable animations or offer alternative content for users who cannot perceive animations.
Subtlety and Purpose
Animations should be subtle and serve a purpose, such as guiding the user’s attention, providing feedback, or enhancing the overall user experience. Avoid using animations solely for decorative purposes, as they can become distracting or overwhelming.
Consistency
Maintain consistency in your animation styles and patterns throughout your website. Consistent animations help create a cohesive and intuitive user experience, making it easier for users to understand and navigate your site.
Responsive Design
Ensure that your animations work seamlessly across different devices and screen sizes. Consider how animations may need to be adjusted or scaled for optimal viewing on various platforms.
That’s about all I can think of to include with some of these basic definitions, use cases, and techniques. Really, use your imagination. There’s a lot more to CSS animation properties than what I’ve talked about here. Experiment with longer, looping animations. If you find things to be bland and flat in your build, animations can add some texture.
As far as web animations and their use has gone, it’s been peaks and valleys over two, going on three decades. From the glory days of Flash to the release of CSS3 animation properties, web animation techniques have come a long way. Animation has always offered developers and designers powerful tools to give life to their designs. It seems like the micro-interactions are everywhere these days. Hell, I use plenty on this site.
Leverage those CSS animations and SVG animations in your builds. There are plenty of tools for different platforms. I did enjoy writing my own CSS animations back in the day. So, I do know how they work and can still get in there and make things work how I want, but these days I prefer to use plugins or something like animate.css. It’s a kind of like bootstrap for your simple CSS animations.
Follow the best practices I listed off earlier. Guide your users through content with subtly. Reveal pieces of the site or page to them in a way that maintains the goal of creating a slick, relaxing experience. Don’t overwhelm. It can turn from “wow” to gimmicky pretty fast. And finally, continue building the web you want to use!