Animation often needs some space to move in, but with responsive design we know the space we have is ever-changing. Balancing those two factors can lead to some tricky design problems for web animation, especially when you throw performance and design concerns into the mix! Val will break down examples and show you how to design animations that work well at all viewport sizes without driving yourself crazy. Also see the 5 min video version: http://valhead.com/2015/06/19/screencast-animation-in-responsive-design/

3. Problem:
Motion that becomes distracting
in smaller spaces
:(

4. Simplify For
Smaller Spaces

9. Problem:
Animation that isn’t readable
on smaller viewports
:(

10. Responsive
Choreography

11. Solution 1:
JavaScript & multiple timelines to the rescue!

15. 1 2 3
1 timeline

16. 3
2
1 timeline
timeline
timeline

18. Solution 2:
Responsive SVG to the rescue!

21. Responsive SVG Animation
Different CSS animations at different breakpoints
Adjusting SVG viewBox property with JavaScript
breakpoints
See Sarah Drasner’s Complex Animations slides:
slides.com/sdrasner/cssdevcon

22. Solution 3:
Art Direction to the rescue!

26. Animation
& Performance

27. Problem:
Animation that is slow and sad on less
powerful devices
:(

29. Most Performant Properties
transforms (position, scale, rotation…)
opacity

30. csstriggers.com

31. More Tricks
the translate 3D “hack”
the will-change property

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

33. Problem:
Everyone hates waiting but loading
things takes time
:(

34. Perceived Performance
Hinting at content before it’s actually available
makes wait times feel faster.

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

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

40. @vlh
uianimationewsletter.com