How to get started with animating on the web

You’ve seen something cool on the web and you want to start making your own animations? Sometimes when you’re getting started with web animation it can be overwhelming to pull apart all the methods and tools and techniques.

I’ll try to break web animation down to a simple explanation.

Animation is achieved when you take an object or “thing”, and change one of its properties, over time.

The “thing” might be a background, a html button, the underline on a link, some divs on a page, a geometric shape in an SVG document, or some particles on a canvas or WebGL graphic.

The property might be the size, width, height, colour, position, or something else. Discovering the properties you can change is a lot of the fun in web animation!

Once you pick a thing, and a property, you need to figure out how to:

• make the thing appear on the screen
• let some time pass
• change the property
• repeat

As for making the thing appear on the screen, you can achieve this using many different mediums.

Examples of mediums are:

• HTML elements
• SVG document
• Canvas
• WebGL

These two demos are both moving a square back and forth. The thing being animated is the square. The property that is being changed is its position. The mediums are different though. One is using a HTML <div> and CSS. The other is using Canvas and JavaScript. Different mediums, same result.

  See the Pen

  moving square 1: HTML & CSS by Rachel Smith (@rachsmith)

  on CodePen.

  See the Pen

  moving square 1: HTML & CSS by Rachel Smith (@rachsmith)

  on CodePen.

In these examples, the rate at which the square moves over time is consistent.

Here’s another demo with canvas and JavaScript, but I’ve also included an animation library called GSAP. GSAP is a tool that helps me control the time part of the equation. By using a tween with an ease to control the position of the square, I can create a more pleasing movement.

  See the Pen

  moving square 1: HTML & CSS by Rachel Smith (@rachsmith)

  on CodePen.

This is just one way to introduce easing though, I can achieve the same effect by updating the CSS in my original HTML and CSS demo to include a timing function.

Here are some potential combinations of what you could animate, which medium and tools you could use to create a web animation

what: button
with: HTML + CSS

what: navigation
with: HTML + CSS

what: chart or graph
with: SVG + JavaScript

what: illustration
with: SVG + CSS

what: motion graphics
with: SVG + GSAP

what: site header background
with: Canvas + JavaScript

what: 2D games
with: WebGL + Pixi.js

what: react components
with: HTML + React + Framer

what: 3D graphics
with: WebGL + three.js

I’m just scratching the surface here.

Given all the ways you could make an animation, the inevitable question is: what should I start with?

I say, start with whatever you want! From all the things you can animate: choose whatever peaks your interest. Do a quick Google of the mediums and tools available to you. Just pick one and give it a go. Animate, iterate, repeat. Eventually you’ll find a medium and tool/s you really enjoy using and will want to stick with for a while.