Stories on board

A in-class sketching exercise to help plan out CSS properties for animations.

Go fullscreen: ⌃⌥F

Stories on board

Set up

  1. Form into pairs
  2. Get out a piece of paper & a pencil

We’re going to sketch out the HTML & CSS necessary to create a more complex animation.

These are the pieces you have to work with.

The final result, after the animations play.

Things to sketch

  • The HTML elements: <div>, <img>, <h1>…
  • Grid units, type sizes, modules, etc.
  • The CSS properties for positioning the pieces
  • The CSS properties for animating the pieces

First concentrate on how to get the elements to look like the final result—then think about animations.

Start

Stories on board

A in-class sketching exercise to help plan out CSS properties for animations.