Intro to Web Animation Techniques

Lessons / ,

CSS, JS, Animated Gifs, Videos, SVG, and More…

Purposeful animation can be used to guide users through a workflow in the same way that good typography should underscore the hierarchy of information in a document.
– Rachel Nabors, Web Animation Engineer

Ever since Apple choose to not support the Flash player on the iPhone, thus ending Flash’s reign as the de facto standard for animation on the web, web designers were forced to rethink the role of web animation during this transitional period while trying to figure out and make sense of the many different web animation approaches and technologies over the years. Thanks to the increasing browser support of CSS3 Animation (in combination with good ole’ Javascript), web animation has made a comeback and has evolved with many new and exciting technologies and emerging solutions. Sadly, there is still no home-run “one-size-fits-all” GUI solution like Flash (web designers can’t simply open up Flash, throw some keyframes on a timeline, and hit enter), but the good news is that web designers can animate using code. And it’s not that hard to do once you get the basics. Let’s dive in…

A Quick Overview

There are several different ways to animate on the web, with CSS and JS being the predominant two front-end technologies. Before discussing the current state of technologies and techniques, it is important to note that there are several different contexts and new applications for animation on the web today that go beyond the traditional non-interactive narrative animations (e.g. promotional videos and animated illustrations). For example, web animation is being used to create highly interactive and visually complex interfaces and systems (e.g. games, hybrid apps, “rich” web sites with animated page transitions, scroll-triggered animations, etc.). Lastly, we are seeing an increasing use of smaller, more subtle UI animations (e.g. animated menus and animated UI components) where web animation is used for improved usability and UX.

Given the above stated technologies and contexts, here are a few general guidelines to consider:

  • For subtle UI based web animation, use CSS3 animation. If user interactivity is required, add in a light amount of Javascript for DOM manipulation (e.g. toggle class on user click).
  • For more complex UI web animations, such as scroll-triggered animations and animated page transitions, you’ll need to use Javascript. Your JS can be coded manually from scratch (using a combination of JS and CSS) or you can use a third-party JS framework.
  • For visually complex animations that are short, straight-forward, linear, and non-interactive, consider using your favorite GUI (e.g. After Effects) to create an animated gif.
  • For longer form, dramatic narrative animations with complex visual effects, consider there’s always Video (HTML5 video).

CSS3 Animation

Native Support in Most Browsers

JS Animation

Javascript animation via DOM manipulation

Others

Animated Gifs, HTML5 Video, HTML5 Canvas, and more…

A Brief History

When trying to determine which web animation techniques are best amongst the many options available today, be sure to keep in mind the many different contexts and types of scenarios that exist for different web animations on the web today. For example, there are a growing number of UI animations, including micro-animations, that are becoming effective means of creating a better, more meaningful interfaces with a direct and positive impact on improving user experiences. Examples include animation navigation menus and menu icons, animated accordions, animated overlays, and animated form elements. Taken one notch further, UI animation includes animated page (or “state”) transitions, such as the slide-left and slide-right transitions commonly found in many native mobile apps.

When it comes to content, many interfaces use animation to reveal, or present content using techniques such as fading, scaling, and sliding in content on page load and triggered animation based on user interactions and navigation, such as via page scrolling. Taken a step further, UI content in not only revealed, but also animated to illustrate custom content features, using elements such as custom animated illustrations and icons, and visual storytelling via vertical and horizontal scrolling. Taken further, there are full-blown time-based, linear time-based animation, such as animated advertisements and narrative motion graphics. Going even further, there are browser-based games that combine animation and interactivity in non-linear formats, along with code-generated artwork, three-dimensional worlds, and full-blown physics engines with particle systems and complex visual effects one might see in a medium like TV or film.

Check out this article entitled Popular Web Animation Techniques by Nick Babich with visual examples of some of the contexts mentioned above.

“You’ll want to stick to transitioning transform and opacity as much as possible.”
– Mark Geyer
http://markgeyer.com/pres/the-art-of-ui-animations/#/5/5

CSS3 animation techniques

For simple UI animations on the web, such as animated menus and UI components, CSS3 animation is probably going to offer the best support and performance across browsers. But wait, there are multiple ways to animate things using CSS3 Animation, so where to begin? CSS animation with keyframes? CSS transitions? Start by asking about the context: is this a UI animation with two states (A > B) and trigger via a user interaction (user hovers or clicks), then CSS transitions are probably going to the simplest and easiest.

CSS Transitions


transition: all 1s ease;

CSS Animation @Keyframes

If something needs to animate without any user interaction (or without using javascript), or if the animation contains more than just two states (e.g. A > B > C > D), then CSS animation and @keyframes should work well.


@keyframes fade-in {
from { transform: opacity: 0; }
to { transform: opacity: 1; }
}
.fade-in {
opacity: 0;
animation: fade-in 1s ease-in-out 1s forwards;
}

CSS Transforms

Regardless of whether you choose CSS Transition or CSS animation, both can utilize the power of CSS Transforms. CSS transforms can translate, rotate, and scale HTML elements. Together with opacity, one can do amazing animations with these simple tools.

Four Core CSS Properties to use for CSS Animation:

  1. position/translation: translate(x,y)
  2. scale: scale(x,y)
  3. rotation: rotate(angle)
  4. opacity: opacity(value);

3rd Party CSS Libraries

If the effect that you or your client needs is not easily able to achieved via native CSS, there are several third-party CSS animation libraries to check out. They are also fun to peruse for visual inspiration.

Javascript (JS) Animations

One level up from Native CSS animations are Javascript animations. There are multiple approaches and ways to use Javascript to create web animations, from writing native/vanilla JS, to JQuery, to 3rd party libraries.

Native JS

Vanilla JS, alone or in combination with CSS, is an effective and well-supported way to create browser-based web animations. Essentially Javascript is used to change the properties of elements on the page via DOM manipulation. This can be done directly (e.g. changing an elements properties using javascript) or indirectly (e.g. adding/removing a class on an element that is then changed via CSS3 animation). For a working example, check out this W3Schools example that uses both JS and CSS.

JQuery

JQuery’s .animate is a quick and easy approach. Check out W3Schools JQuery animation page to learn more and to see some demo examples, like this one.

3rd Party JS Libraries

If your needs are not easily able to achieved via native JS or Jquery, there are several third-party JS animation libraries to check out.

Web Animations API (WAAPI)

The Web Animations API is an important thing to monitor in the years to come. Currently, browser support for WAAPI is relatively poor (compared to the other options presented on this page, although there is supposedly an OK polyfill), but this might be the future of animation on the web. Keep an eye on it.

Other Approaches, Techniques, and Technologies to Consider:

Page Transitions:
Sprite Animations
  • [ Links coming soon ]
SVG Animation

SVG Animation is an effective approach for vector-based imagery, such as icons and illustrations. Similar to other HTML elements, SVG’s can be animated using CSS, JS, and/or a combination of these technologies.

  • [ Links coming soon ]
Scroll-triggered animation

Animations that are triggered as the user scrolls on a page often times use Javascript for triggering (to detect when an element is within the viewport of a screen while the user is scrolling) and CSS for the animation (e.g. by adding/removing a class on an element).

The Principles of Animation

No matter what, don’t forget the basics of strong animation and motion graphic design. To remind yourself of the core principles of animation, watch this Illusion of Life animation.

The illusion of life from cento lodigiani on Vimeo.

 
Try to solve the challenge below by doing the following: in the code examples below, click on the “edit in codepen” button in the upper right, then delete the css and try to recreate the original from scratch.

CSS Animation Exercise #1: Simple Fade-in Using @keyframes

See the Pen CSS Animation Test: Simple Fade-in Using @keyframes by kccnma (@kccnma) on CodePen.0

Instructions: remove all fade-in css and try to re-do it from scratch.

CSS Animation Exercise #2: Simple Scale-in Using @keyframes

See the Pen CSS Animation Test: Simple Scale-in Using @keyframes by kccnma (@kccnma) on CodePen.0

Instructions: remove all scale-in css and try to re-do it from scratch.

CSS Animation Exercise #2: Simple Move-in (and Fade-in) Using @keyframes

See the Pen CSS Animation Test: Simple Move-in Using @keyframes by kccnma (@kccnma) on CodePen.0

Instructions: remove all move-in css and try to re-do it from scratch.

CSS Animation Exercise #4: CSS3 Animation Hero Section Examples

See the Pen CSS3 Animation Header and Hero Section Example by kccnma (@kccnma) on CodePen.0

Instructions: remove all css and try to re-do it from scratch.

CSS Animation Exercise #4: CSS3 Animation Hero Section Examples

See the Pen CSS3 Animation Header and Hero Section Example by kccnma (@kccnma) on CodePen.0

Instructions: remove all css and try to re-do it from scratch.

If you completed these exercises, nice work! 

Summary

There are multiple different ways to animate on the web. For UI based animation, the simplest and easiest way is to use CSS3 animation. When relatively simple user interactivity is required, you can add in a light amount of Javascript for DOM manipulation. For more complex UI web animations, such as scroll-triggered animations and animated page transitions, more advanced Javascript is required. These can be coded manually, from scratch (using a combination of JS and CSS), or you can use a third-party JS framework. For visually complex animations that are short, straight-forward, linear, and non-interactive, consider using an animated gif.  For longer form, dramatic narrative animations with complex visual effects, there’s always HTML5 Video.

When trying to determine which web animation techniques are best amongst the many options available today, be sure to keep in mind the overall size of the files and all dependencies required and the performance implications on the browser during page load (e.g. a large SVG that is greater than 1MB might be better displayed as either layered pngs or even an animated gif). Often times the best practice is to do a series of tests experimenting with several different techniques, then critically weigh the pro’s and cons for each before making a decision. Regardless of the technologies used, be sure to use UI animation with a clear and thoughtful purpose that will result in a meaningful interface with a positive impact on improving the user experience.

Related Resources and Reading

Inspiration:

Examples:

Systems:

Go Further

  • Try animation a page’s header and hero content like this Codepen Example
  • Try revealing content as a user scrolls down the page like this Codepen Example

Author Notes

This was written specifically to help aspiring web designers as they aim to:

  • Learn the basic concepts and principles of web animation
  • Learn how the basic principles of motion graphic design can be applied in the context of user interface design
  • Use animation and motion design technologies and techniques to enhance the user experience.