Get Started With Web Animation

Length:MediumLanguages:

We've built complete guides to help you learn CSS and animate css, whether you're just getting started with the basics or you want to explore more advanced techniques.

Get Started With Web Animation

Motion has become a really important part of the web design field in recent years. Motion and animation add layers of dimension to an interface, aiding the user, offering feedback, delighting, and engaging along the way.

In this article, I’ll run through the steps involved in learning animation for the web, from what it’s all about, though straightforward transitions, more complex animations, and useful resources. There’ll be some practical, interactive exercises to drill points home. By the end, you’ll have a solid idea of the current web animation landscape and how you can get to grips with it.

We’ll be looking at the following:

• What, and Why?
• CSS Transitions
• CSS Keyframe Animation
• Authentic Motion
• Cubic Bezier Functions (Timing)
• CSS Libraries and Tools
• SVG
• JavaScript
• Prototyping

What, and Why?

The web design discipline is ever-changing, and one aspect to have emerged in recent years is the ability to animate. Browsers have become more capable, processors faster, and hand held devices have paved the way for “gestures”; swiping, pinching, and force touching.

Motion offers interfaces a number of things which improve user experience, including:

• Causality: highlighting action and reaction, one thing causing another.
• Feedback: telling a user that they’ve successfully (or unsuccessfully) completed an action, such as clicking something, or entering form data.
• Progression: illustrating that one thing follows another, events in series–loading bars and spinners being perfect examples.
• Delight: good design is often said to be invisible, but well implemented motion can genuinely delight and engage your users.

Motion improves the user experience and brings life to the web. With all this in mind it’s important that, as an interface designer, you take animation into account. Let’s get going with the basics!

Learning Resources

Or jump right in with Craig Campbell’s practical animation course!

CSS Transitions

CSS transitions are often a web designer’s gateway into the world of motion. They instruct the browser to take an initial state of an element, then an end state, and transition smoothly between the two. The syntax is relatively direct, comprising four properties and a shorthand version:

• transition-property
• transition-duration
• transition-timing-function
• transition-delay

Let’s start with a button. In this example we have a button with some base styles to make it look as though it’s raised from the page a bit. By default, if you hover over it, it changes colour. Then if you click on it, it appears to be pushed down. We’ve done this using the background, the position-top, and the position-left properties, but the change in each case is instantaneous:

Now let’s make the effect subtler, by adding a transition to the .button element. Adding, for example, transition: all 1s; will make sure that all property changes will be transitioned smoothly over the course of 1 second.

Uncomment the first rule in the CSS pane and you’ll see it take effect:

Now you’ve seen that work, try uncommenting the second rule instead. In the second example we’ve listed each of the changing properties individually, so we can define different transition speeds to each one.

Lastly, try uncommenting the third example, where you’ll see we’ve added timing functions too. These affect the rate of transition–we’ll talk more about them shortly.

CSS Keyframe Animation

With CSS transitions under your belt, it’s time to take things up a notch. CSS keyframe animation gives far more control, allowing you to specify changes all along a timeline. Two steps are necessary for keyframe animation; defining the keyframes themselves, and assigning the animation to your element of choice.

Now we can define some keyframes, setting a from state, and a to state. Here we’re saying that its left position property will begin at 5%, animating to 85%, effectively moving the ball across the screen.

You can see we’ve nested the from and to within a @keyframes declaration. And we’ve named our animation move. Now we need to assign this animation to our ball, which we do like so:

This is implemented in its most simple, shorthand form. We need to define how long we want the animation to last, and which animation we’re applying. Now when we load the demo, you’ll see the animation take effect:

Note: the animation kicks in upon page load, so you’ll need to hit the rerun button in the corner of this embedded pen to see anything happen.

More Control

Going beyond simple from and to stages, we can define points all along the timeline using percentages. Using 0% and 100% would give us exactly the same result as before:

Let’s add an extra step in the middle, and bring the ball back to its starting position. We’ll also make the animation iteration-count infinite, so it keeps looping. Edit the values in the pen below and see them take effect:

It’s possible to add multiple animations to a single element, change the animation direction, and to completely alter the timings. Take a look at these resources to find out more!

Authentic Motion

Motion brings static objects to life, and the difference authentic motion can make to this is immense. Motion gives an object mass, places it in space, and real-world physics suddenly apply to it. If an object moves in a way we’re familiar with, we’re far more likely to make that all-important emotional connection. It’s the difference between a circle moving up and down, and a ball bouncing:

The difference between these two is clear (though the bounce is far from being perfect). Learning how to give your animation authenticity is crucial.

“Most natural action tends to follow an arched trajectory, and animation should adhere to this principle by following implied ‘arcs’ for greater realism.” – Twelve Basic Principles of Animation

Cubic Bezier Functions (Timing)

We’ve covered “easing” a couple of times already in this article; it’s the rate at which something moves, and can be expressed as a curve along two axes. In CSS there are a few built-in timing functions which you can use with their keywords (linear, ease-in, ease-in-out etc.) but you can describe these timings more precisely with a cubic bezier function, which looks like this:

As time moves constantly along the x axis, the rate of movement speeds up and slows along the y axis. This example above is used on our bouncing ball from earlier; you can imagine the ball moving quickly upwards, then slowing as it reaches its apex. Take a look at this curve on cubic-bezier.com to help you visualize it.

The curve is controlled by the two handles (which you’ll be familiar with if you’ve ever used the pen tool in Adobe Illustrator or Sketch) and the cubic bezier function we can use in CSS reflects those handles. So, our function looks like:

There are four values, each one ranging (for the sake of argument) from 0 to 1 They represent:

• the x coordinate of handle 1 (.1)
• the y coordinate of handle 1 (.25)
• the x coordinate of handle 2 (.1)
• the y coordinate of handle 2 (1)

Understanding how bezier functions work will dramatically improve your animations, particularly if you’re aiming for authentic motion.

CSS Libraries and Tools

Coding good-looking CSS animation by hand can be tough, but there are a number of libraries available which do the heavy lifting for you. Animate.css, by Dan Eden, is a stylesheet filled with keyframe-based animations, all with custom class names, ready for use.

SVG

SVG (Scalable Vector Graphics) have become the web designer’s best friend in recent years, giving us crisp graphics, lighter pages, and animatable elements. Some of what we’ve discussed can be applied directly to SVG elements, but many properties behave differently.

Here’s an inline SVG with a transition applied to its color upon hover. However, you’ll notice we’re using the fill property, not the background-color which we would expect with an HTML element:

SVG can be animated with CSS much like we’ve discussed in the rest of this article. If you can transform or translate it with HTML, you can do the same with SVG.

But SVG can also be manipulated through SMIL (Synchronized Multimedia Integration Language) which allows you to use things like the <animate> element, directly within the SVG. Check out this SVG circle, transitioning across the screen:

This is a circle, containing an <animate> specifying which attribute to animate (the cx coordinate in this case), from a position of 50px to 400px, duration of 2 seconds, and repeating indefinitely.

SMIL is a very powerful set of tools, start reading up below!

Learning Resources

Love the idea of animating SVG but not sure what to animate? Check out the vector illustration services on Envato Studio and see what’s on offer!

JavaScript

Many front-end developers first toy with JavaScript (or jQuery) by adding animation to web pages. Where browser support for CSS alternatives is sketchy, JS is a good bet.

jQuery’s UI library comes packaged with a number of off-the-shelf UI helpers, including the effect() method, demonstrated below (choose an effect from the dropdown and watch as it’s applied to the content:

Beyond this, JavaScript (in the right hands, not mine) can offer serious animation, and since Adobe Flash officially handed in its resignation some brilliant JavaScript libraries have emerged. GreenSock’s Animation Platform (GSAP) is arguably the most powerful–giving developers a whole host of timeline and tween-based tools.

Take a look at our beginner’s course and see how you fare with GSAP!

Prototyping

Gone are the days of static design deliverables being enough–images and flow diagrams don’t communicate enough information. Nowadays shrewd clients want to see and feel what you’re designing, experience the movement, which is why prototypes answer far more questions.

Prototypes can be pretty raw, or reflect the end product quite accurately, but wherever they fall on this scale creating them needs to be efficient. Where motion and animation is concerned there are a number of applications to help you communicate your designs.

Adobe Animate is Flash for the next generation, offering advanced animation tools. Adobe After Effects is a video production tool, but also offers advanced timeline-based motion. But then there are simpler applications, such as Principle for Mac, and even Keynote:

Once motion design has become a part of what you do, finding the best tools to show the world is an important step!

Conclusion

And there we have it! This guide should have given you a solid understanding of the web animation landscape as it exists today. With all these learning resources under your belt you’ll be armed with a whole new set of skills to explore the world of motion design.

I hope you found it useful. Please share your own tips and resources in the comments below, or on the Envato community forum.