Overview

So, you’ve learned the basics of what web animation is and why you should be doing it, and now it’s time to wonder how you actually create these kinds of animations for the web. Of course, there are ways to create stunning and complex animations using programs like Adobe AfterEffects, but this isn’t a guide on how to create cartoons. Because flUX is a guide for web animation, all of our lessons will focus on how you can create animations using code.

There’s not just one way to create a web animation, so first we’re going to break it down with an explanation of different techniques and how to choose what you need. Some are pretty simple to invoke, while others are more complicated. Each has a time and a place.

CSS Transitions

The simplest. Point A to Point B. But, they require a triggering event to run. They’re the easiest and most lightweight to work with.

Use When…

  • You want to create a simple hover effect with only one state change
  • You need to move an object from a starting position to ending position, but you don’t need to define anything in between.
  • You don’t need your effects to run on page load

Example

See the Pen CSS Transition by Kendall (@kalake96) on CodePen.

This Codepen demonstrates a CSS Transition effect.


CSS Animations

Overall, CSS animations offer more control. They allow you to define a series of states throughout the animation, instead of just a start or an end. You can loop animations and make them run forwards or backwards. They can run without a trigger, but you can use one if you need to.

“Transitions are quicker and easier to work with, and animations give you more control. That’s the main thing to keep in mind when choosing between the two.” -Steven Bradley, AdobePress

Use When…

  • You need to create an animation that has multiple states in between the starting and ending point.
  • You want an animation that runs on page load, without any necessary user action.
  • You want an animation that loops infinitely.

Example

See the Pen CSS Animation by Kendall (@kalake96) on CodePen.

This Codepen demonstrates a CSS Aniation effect.


SVG Animation

SVG Animations are a kind of CSS animation that allow you to control an SVG line drawing. Using this animation strategy, you can create effects like a line or text being drawn onto the page, or a looping effect. As long as you have a prior understanding of CSS Animations and @keyframes,

this kind of animation isn’t too difficult to execute. Of course, simpler drawings will be easier to animate than more complex ones.

SVG Animations can be striking, but they will probably be the most infrequently used part of your animation toolbox.

Use When…

  • You want to make it look like someone is drawing on the page.
  • You want to create a dramatic visual effect (like we did on our homepage!)

Example

See the Pen SVG Animation by Kendall (@kalake96) on CodePen.

This Codepen demonstrates an SVG animation.


JavaScript Animations

You can accomplish quite a lot just using CSS, but in general, if you want to go big you have to go JavaScript. In flUX, we'll be starting simple, but we'll also provide pathways to continue your JS journey.

Use When…

  • You need to trigger an animation with a click.
  • You want to pull from an elaborate animation library and not need to code as much yourself.
  • You want a really complex animation.

Example

This example is pretty famous in the world of UX animation. JavaScript allows the MailChimp chimp to give a high five whenever it is invoked by a click. This one is technically a combination of an SVG animation and JavaScript animation--it's important to note that these two (as well as the other methods) can all play together nicely.

See the Pen MC High Five by MailChimp UX (@mailchimpux) on CodePen.

This Codepen shows how a MailChimp animation was built using JavaScript.

Which language should you use if you want to trigger an animation with one click?





Sources


Web Designer Depot
CSS Animation Rocks
W3 Schools