Beginner guide to web animation to get started

A Creative Front-End Developer or Motion Developer will make a UI or concept come to life on the web. This blog should teach everyone (especially me) a lot about web animation.

What can you build with web animation?

You can build some really fun, pretty and impressive experiences with web animation. But most of all it gives you as a developer or designer a way to tell a story, which involves even more senses as typical text.

As animation means the state of being full of life, we are literally conveying living interfaces and experiences to our users.

Here's another example of where I tried to tell a story, a rather boring story actually.

Getting started

Currently I'm assuming you already know a little bit of HTML, CSS and maybe JavaScript. If you don't, but you would like to learn about it; Google is your new best friend.

I'm going to show to basic CodePen demo's and will guide you through the code! All of these pens will be in plain HTML, CSS and JavaScript. (The CSS might be SCSS sometimes)

Animation with CSS properties

Writing some HTML

Let's say we have this button.

1<div>
2  <button type="button">Hover Hold Release!</button>
3</div>

We would want to make the button reactive to certain gestures.

Affordances are properties of objects which show users the actions they can take. Users should be able to perceive affordances without having to consider how to use the items. For instance, a button can be designed to look as if it needs to be turned or pushed.

Usually when we press a button, we push it further away from us; resulting in us perceiving that it's smaller.

Let's do that.

Writing some CSS

In a CSS file we can add this rule:

1button:active {
2  transform: scale(0.9);
3}

This makes it so that when we press a button it reduces in size.

Since we can not make websites indentical copies of the physical world, we have states like hover. Hover will enable us to add styles to an element when you hover your cursor on the element.

In a CSS file we can add this rule:

1button:hover {
2  background-color: goldenrod;
3  transform: scale(1.05);
4}

When you start clicking and hovering you might wonder why there is no animating going on. That is because we need to tell the HTML element that it will have to transition between certain values during certain states.

1button {
2  transition-delay: 0s;
3  transition-duration: 150ms;
4  transition-property: transform, background-color;
5  transition-timing-function: ease-in-out;
6}

or use the shorthand, which will save you fingers in the long run:

1button {
2  transition: transform 150ms ease-in-out, background-color 150ms ease-in-out;
3}

Note: Always try to use CSS transform and opacity, since these CSS properties enable GPU acceleration. If you want to know why, find out here.

When you combine these three code samples and add some pretty styling, you may end with something like this:

Final demo

Thanks for reading!

This was my very first blog post so I wanted to keep it simple (for me). I hope someone somewhere learned something via this post!