The Web in Motion
@Maker Series


Today's goal

Try out animating with CSS, JS and SVG.


Get an idea of  where and how your work can benefit from UI animation. 


Have fun and try out some new things!

Today's plan

10:00 -11:00  UX in Motion
11:30 - 11:45  Break

11:45 - 1:00  Essentials of CSS animation

1:00 - 2:00  Lunch

2:00 - 3:30  Basics of TweenMax & TimelineMax

3:30 - 3:45  Break

3:45 - 5:00  SVG animation


  • Your name

  • Your animation experience

  • What are you hoping to get out of today's workshop?

UX in Motion

CSS Transforms

CSS Transforms

  • The "yoga" of CSS

  • Allow you to modify the coordinate space of the CSS visual formatting model
    (aka, change the way DOM objects look)

CSS Transforms

translate(), translateX(), translateY(), translateZ(), translate3d()
rotate(), rotateX(), rotateY(), rotateZ(), rotate3d()
scale(), scaleX(), scaleY(), scaleZ(), scale3d()
skew(), skewX(), skewY()
matrix(), matrix3d()


CSS Transforms

These properties/methods can come in handy when working with transforms too:


CSS Transforms

Transforms usually look something like this:

.box {
    transform: translate(50px, 100px);

.box {
    transform: scale(1.5) skew(20deg) rotate(45deg);

CSS Transforms

matrix() or matrix3D() for combined transform effects and animations.


Two helpful tools:

CSS Transitions

CSS Transitions

The minimum you need for a transition:

  • Point A and a point B
  • A duration (in second or milliseconds)

CSS Transitions

Your point A and point B might look like this:

.box {
    transition: 1s;

.box:hover {
     transform: scale(2);

CSS Transitions

A duration and property specification add detail:

.box {
    transition: background-color 1s ease-in-out;

.box:hover {
     transform: scale(2);

CSS Transitions

Multiple transitions are possible too.

Comma separate the different transitions for more complex effects:

.box {
    transition: background-color 1s ease-in-out,
    transform .5s ease-out;

.box:hover {
     transform: scale(2);
     background-color: blue;

CSS Transitions

Other transition related properties to help refine your transitions:

  1. transition-delay
  2. transition-duration
  3. transition-property
  4. transition-timing-function

Exercise: menu transitions

Use this Pen as your starting point and use CSS Transforms and Transitions to:

  1. Transition the menu from off-screen to on-screen when the icon is clicked

Bonus: transition the menu items into view with some overlapping action

And here’s one possible solution if you’d like to compare notes

CSS Keyframe

CSS Keyframe Animations

The minimum you need for an animation:

  • A named set of keyframes to assign
  • The animation name
  • A duration

CSS Keyframe Animations

An example keyframe animation:

.box {
    animation: myAnim 1s;

@keyframes myAnim {
    from {opacity: 0;}
    to {opacity:1;}

CSS Keyframe Animations

CSS Keyframe Animations

Useful properties you might not know you can change within keyframes:

  • z-index
  • transform-origin
  • animation-timing-function

Animatable CSS Properies

There are a few lists of all the properties you can transition or apply animations to.

Bookmark the one(s) you like best!

Exercise: robot dance

Use this Pen as your starting point and:

  1. Create keyframe animations
  2. Apply them to Bob's limbs to make him dance

Bonus: Use as Sass variable for the "beat" to coordinate the timing of your animations

CSS Variables

CSS Variables

AKA Custom Properties

:root {
  --main-color: #06c;

#foo h1 {
  color: var(--main-color);

CSS Variables

CSS Variables

Why they’re a big deal:

  • They follow the CSS cascade(custom properties)
  • You can easily modify values with JavaScript

CSS Variables & JS


li {
  background: hsl(var(--hue), 80%, 60%);
  border-radius: 5%;

JavaScript:'--hue', Math.floor(Math.random() * hDiff * 2) + hStart);

CSS Variables & JS

CSS Variables & keyframes

@keyframes thing {
 100% {transform: scale(calc(var(--scale) * 1)) rotate(var(--deg));}

li {
  animation: thing calc(var(--dur) * 1s) linear var(--repeat) alternate;
li:nth-of-type(1) {

li:nth-of-type(2) {

CSS Variables & keframes

CSS Variables & media queries

CSS Variables

CSS Variables Reading

Exercise: CSS Variables

Add a  CSS variables to one of your CSS Pens.


Modify one of the CSS Variables example Pens to use variables differently that it does now.


SVG Workflow for Animation

What’s In SVG

  • Rectangles (rect)
  • Circles (circle)
  • Ellipse (ellipse)
  • Line (line)
  • Polylines (polyline)
  • Polygons (polygon)
  • Paths (path)

Preparing SVG Assets

  • Simple, discrete, layered shapes work best
  • Pathfinder merged shapes don't leave you much to work with

Our SVG file

Four discrete shapes: 

Optimizing SVG

Two SVG optimizers: 
(maybe not so much anymore)


Exporting SVG from Illustrator

Animating SVG

Animating SVG

We have some choices!

  • SMIL
  • CSS
  • JavaScript

SVG icon animated 3 ways

(use the eye icon to see the less mathy compiled CSS)

Animating SVG with SMIL

  • Tag-based animation defined within SVG DOM
  • No IE support  (No Edge either)
  • Being depricated in Chrome
  • (paused, but not reversed)

Animating SVG with CSS

  • CSS transitions & keyframe animations can be applied to elements within SVG as well
  • Only a limited number of SVG presentation attributes are accessible as CSS properties
    (This will change in the future with SVG 2)
  • CSS transforms are not supported on SVG elements in IE or Edge

Animating SVG with CSS

  • Great for adding a little life to SVG icons or
    other small graphics
  • fill and transforms can get you far
    (even without that pesky IE support)

Animating SVG with CSS

Animating SVG with CSS

Animating SVG with JS


  • Greensock Animation Platform
  • "All-purpose" JS animation tool that works equally well on DOM elements and SVG
  • Approachable syntax
  • Powerful timeline capabilities
  • Goes waaaay back with IE support (IE 8!)

Helpful SVG Resources

GSAP Basics


  • Makes chaining animations and adjusting animations easier than editing keyframes
  • Allows you to manipulate multiple transform properties separately
  • Backward browser compatibility (back to IE6!) 
  • Smoothes some browser inconsistencies

Some things people make with GSAP:

Greensock's showcase page:

Lots of CodePens are made with Greensock too:

GSAP Performance

GSAP Performance

More on GSAP

  • It's not the only JavaScript library out there for animation, but it's very widely used
  • It does require loading additional resources (as all JS libraries do)
  • Some plug-ins or licensing requires a fee
  • Do you own benchmarks for most useful results


GSAP Workflow Features

  • Simple syntax
  • Timelines (even nested ones)
  • Easy staggers
  • Helpful plug-ins:
    • Draggable
    • DrawSVG
    • MorphSVG

GSAP Syntax Basics, seconds, {property: amount, property:amount, ease});"div", 2, {
            ease: Bounce.easeOut

GSAP Syntax Basics

Other options:



TweenMax.fromTo("div", 2, 
{scaleY:1, scaleX:1.5, y:0, opacity:1},
{scaleY:0.75, scaleX:1.25, y:300, opacity:0.75, ease: Bounce.easeOut});

GSAP Syntax Basics

Staggers are also useful. (And less code than with CSS!) 

TweenMax.staggerTo(gboxes, 2,
  backgroundColor: "#FFCD41",
  rotation: 90,
  delay: 1,
  ease: Sine.easeOut},

GSAP Resources

Some people find this cheat sheet helpful:


Everyone loves the ease visualizer, it's fun:


Three other helpful things that answer common questions:

CodePen safe GSAP plugins

Using relative numbers for x and y

GSAP and responsive design

GSAP plugins for CodePen

GSAP Timeline

The GSAP Timeline

A timeline groups individual animations together and gives us control over how they play out.


We can use TimelineLite or TimelineMax

tl = new TimelineMax({repeat: -1, delay: 1,yoyo:true}); 

The GSAP Timeline

Once you have the timeline created, you can add animations to it:

tl = new TimelineMax({repeat: -1, delay: 1,yoyo:true}); 

tl.staggerTo(drops, 2,
  ease: Sine.easeOut},

The GSAP Timeline

Position parameters give you even more control to make animations overlap or create gaps between animations: 

Understanding position parameters


The Weather Again

What if we made our weather icon animate with a GSAP timeline instead? 

Timeline Labels

GASP Timelines

GSAP + SVG exercise

Animate our weather icon (or this SVG Pen) using GSAP






Web Animation Performance

Browsers can very efficiently transition

  • size - transform: scale()
  • position - transform:  translate()
  • rotation - transform: rotate()
  • opacity 

Browser Rendering Steps

Asset 1 JavaScript

Browser Rendering Steps

JavaScript - sorting data, adding elements, causing change

Style - figuring out which CSS rules apply to which elements

Layout - calculate the size changes of styles

Paint - filling in the pixels

Composite - putting everything in the correct layer order

Browser Rendering Steps


  • Changing a layout property like width or height means browser must go through all the steps
  • Changing a "paint only" property, like text colour, means the layout step can be skipped
  • Changing a compositor only property, like transforms and opacity, skips both the layout and paint steps. YAY!

Comparing HA Animation




Digging Deeper Into GPU

  • Factors beyond transforms can cause new composite layers to be created
  • Too many layers can impact performance (especially on those device things).

An in-depth look at GPU animation
On translate-3d and layer creation hacks


  • CSS is declarative
    (whole animation is known ahead of time) 
  • JS is imperative
    (browser only really aware of the current frame)
  • CSS animations with transform & opacity won’t be impacted by the main thread.
  • But logic!




The will-change property

Performance Resources

Handy Browser Tools

Firefox and Chrome both have great animation panels in their dev tools!

Maker Series Web Animation Workshop

By vlh


Maker Series Web Animation Workshop