Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 Animation
Different CSS animations at different breakpoints
Adjusting SVG viewBox property with JavaScript
...
Solution 3:
Art Direction to the rescue!
Animation
& Performance
Problem:
Animation that is slow and sad on less

powerful devices
:(
Most Performant Properties
transforms (position, scale, rotation…)
opacity
csstriggers.com
More Tricks
the 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
Animation In Responsive Design
Animation In Responsive Design
Animation In Responsive Design
Animation In Responsive Design
Animation In Responsive Design
Animation In Responsive Design
Animation In Responsive Design
Animation In Responsive Design
Animation In Responsive Design
Animation In Responsive Design
Animation In Responsive Design
Animation In Responsive Design
Animation In Responsive Design
Animation In Responsive Design
Animation In Responsive Design
Animation In Responsive Design
Animation In Responsive Design
Animation In Responsive Design
Animation In Responsive Design
Upcoming SlideShare
Loading in …5
×

Animation In Responsive Design

2,145 views

Published on

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/

Published in: Design
  • Be the first to comment

Animation In Responsive Design

  1. 1. Problem: Motion that becomes distracting 
 in smaller spaces :(
  2. 2. Simplify For 
 Smaller Spaces
  3. 3. Problem: Animation that isn’t readable 
 on smaller viewports :(
  4. 4. Responsive Choreography
  5. 5. Solution 1: JavaScript & multiple timelines to the rescue!
  6. 6. 1 2 3 1 timeline
  7. 7. 3 2 1 timeline timeline timeline
  8. 8. Solution 2: Responsive SVG to the rescue!
  9. 9. 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
  10. 10. Solution 3: Art Direction to the rescue!
  11. 11. Animation & Performance
  12. 12. Problem: Animation that is slow and sad on less
 powerful devices :(
  13. 13. Most Performant Properties transforms (position, scale, rotation…) opacity
  14. 14. csstriggers.com
  15. 15. More Tricks the translate 3D “hack” the will-change property
  16. 16. dev.opera.com/articles/css-will-change-property/
  17. 17. Problem: Everyone hates waiting but loading things takes time :(
  18. 18. Perceived Performance Hinting at content before it’s actually available makes wait times feel faster.
  19. 19. “Our findings indicate that the psychological mechanism of transitions is completely different from progress bars”
  20. 20. viget.com/inspire/experiments-in-loading-how-long-will-you-wait
  21. 21. @vlh uianimationewsletter.com

×