Problem: Motion that becomes distracting

in smaller spaces

:(

Simplify For Smaller Spaces

Problem: Animation that isn’t readable

on smaller viewports

:(

Responsive Choreography

Solution 1: JavaScript & multiple timelines to the rescue!

1 2 3

1 timeline

3

2

1 timeline

timeline

timeline

Solution 2: Responsive SVG to the rescue!

Responsive SVG AnimationDifferent CSS animations at different breakpoints

Adjusting SVG viewBox property with JavaScript breakpoints

See Sarah Drasner’s Complex Animations slides: slides.com/sdrasner/cssdevcon

Solution 3: Art Direction to the rescue!

Animation & Performance

Problem: Animation that is slow and sad on less

powerful devices

:(

Most Performant Propertiestransforms (position, scale, rotation…)

opacity

csstriggers.com

More Tricksthe translate 3D “hack”

the will-change property

dev.opera.com/articles/css-will-change-property/

Problem: Everyone hates waiting but loading

things takes time

:(

Perceived Performance Hinting at content before it’s actually available

makes wait times feel faster.

“Our findings indicate that the psychological mechanism of transitions is completely different from progress bars”

viget.com/inspire/experiments-in-loading-how-long-will-you-wait

@vlh uianimationewsletter.com