Planning & Implementing Meaningful UI Animations

James Steinbach | @jdsteinbach

jds.li/anim

Why Do We Animate Elements?

  • Set a client’s site apart
  • Make it “pop”

Why Do We Animate Elements?

  • Set a client’s site apart
  • Make it “pop”
  • Show off dev skill

Why Do We Animate Elements?

  • Set a client’s site apart
  • Make it “pop”
  • Show off dev skill
  • Communicate meaning about content

We Make Up Stories

Whenever things happen,
we automatically invent a narrative
to explain those events.

post hoc ergo propter hoc

Animation Tells
the Right Story

When we animate an interface correctly, we make sure users don’t make up the wrong story.

What Does Animation Communicate?

“Play with Me”

  • Use motion to show that content is interactive.
  • Connected to :hover
  • Links, inputs, buttons

“Ya Done Good, Kid”

  • Use motion to confirm the success/failure of a user’s action.
  • Shaking submit button if fields don’t validate

“We’re Connected”

  • Use motion to show the relationship between pieces of content.
  • Moving captions as carousel images move
  • Transitioning help text as users hover over related elements

“We’re Connected”

See the Pen Hover + Flag by James Steinbach (@jdsteinbach) on CodePen.

“We’re Connected”

See the Pen Flexbox by James Steinbach (@jdsteinbach) on CodePen.

“We’re Connected”

See the Pen Form Flip by James Steinbach (@jdsteinbach) on CodePen.

“I’m Important”

  • Use motion to show which pieces of content deserve the user’s attention.
  • Growing CTA button
  • Growing active form field

“I’m Important”

See the Pen Page Scroll Content Animation by James Steinbach (@jdsteinbach) on CodePen.

“I Come from …”

  • Use motion to show the source of some content.
  • Animating sub-menu on :hover of parent link

“I Come from …”

See the Pen Mobile Menu by James Steinbach (@jdsteinbach) on CodePen.

“I Come from …”

See the Pen Offscreen Menu by James Steinbach (@jdsteinbach) on CodePen.

“I Come from …”

Mobile Menu Animation

“I’m Going …”

  • Use motion to show the destination of some content.
  • “Add to Cart” button

“I’m Going …”

See the Pen Add to cart animation by Filip Danisko (@fdanisko) on CodePen.

How Do I Animate Well?

Give It Life

The illusion of life from cento lodigiani on Vimeo.

Easing Curves

  • Linear motion is flat and lifeless.
  • Easing brings an element of life to animations.
animation-timing-function: linear;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;

Cubic Bezier Curves

Image of a Cubic Bezier Curve

More Cubic Bezier Curves

Image of another Cubic Bezier Curve

Building Your Own

animation-timing-function:
cubic-bezier(.6,-0.14,.77,1.29);

Make It Smooth

“do the performance its good ok”

Make It Smooth

  • opacity
  • transform
  • [*-]color
  • box-shadow
  • top, right, bottom, left
  • margin, padding
  • font-size, border
  • height, width

Resources: CSS Triggers, Jank Free

Transitions vs. Animations

Transitions vs. Animations

  • Transitions: simple off/on state changes
  • Animations: complex motion,
    usually tied to a trigger event,
    differing start/end states

Resources

James Steinbach

Staff Front-End Engineer
at Okta

jdsteinbach

Twitter | Github | Blog