Animation In Responsive Design

1,648 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
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,648
On SlideShare
0
From Embeds
0
Number of Embeds
86
Actions
Shares
0
Downloads
9
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

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

×