Content Choreography

Meaningful Motion
in Ember Apps

Content Warning:
Animation

Realism Warning:
Exaggeration

Why Do We Animate Elements?

  • Set a clien­t’s site apart
  •  
  •  
  •  

Why Do We Animate Elements?

  • Set a clien­t’s site apart
  • Make it “pop”
  •  
  •  

Why Do We Animate Elements?

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

Why Do We Animate Elements?

  • Set a clien­t’s site apart
  • Make it “pop”
  • Show off dev skill
  • Communicate mean­ing about con­tent

We Make Up Stories

Whenever things hap­pen,
we au­to­mat­i­cally in­vent a nar­ra­tive
to ex­plain those events.

post hoc ergo propter hoc

Animation Tells
the Right Story

When we an­i­mate an in­ter­face cor­rectly,
we make sure users don’t make up
the wrong story.

What Does Animation Communicate?

“I’m Important”

  • Use mo­tion to show which pieces of con­tent de­serve the user’s at­ten­tion.

“Play with Me”

  • Use mo­tion to show that con­tent is in­ter­ac­tive.
  • Connect mo­tion to :hover
  • Links, in­puts, but­tons

“Ya Done Good, Kid”

“Slow Down, There!”

  • Indicate that the app or el­e­ment is busy with an async ac­tion
  • CSS can be keyed to aria-busy="true"
  • Forms, new con­tent

“We’re Connected”

  • Use mo­tion to show the re­la­tion­ship be­tween el­e­ments.
  • Off-screen nav

“I Come From …”

  • Use mo­tion to show the source of some con­tent.
  • Accordions, sub-menus

Check out this awe­some lo­ca­tion!

“I’m Going To…”

  • Use mo­tion to show the des­ti­na­tion of some con­tent.
  • “Add to Cart” but­ton

How Do I Animate Well?

Give It Life

The il­lu­sion of life from cento lodi­giani on Vimeo.

Easing Curves

  • Linear mo­tion is life­less & ro­botic.
  • Easing brings an­i­ma­tions to life.
animation-timing-function: linear;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;

Easing Curves: Cubic Bezier

Image of Cubic Bezier Curver

Easing Curves: Cubic Bezier

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

Make It Smooth

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

Respect Users

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --animation-delay:     0s !important;
    --animation-duration:  0s !important;
    --transition-delay:    0s !important;
    --transition-duration: 0s !important;
  }
}

Resources

General

Easing Curves

Animation Performance

Ember Animation

James Steinbach

Senior UX Developer
at DockYard

jdsteinbach

Twitter | Github | Blog

jds.li/emberanim