Downloaded 14 times
Uploaded byVal Head
Animation In Responsive Design
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/
Animation In Responsive Design
- 3. Problem: Motion that becomesdistracting in smaller spaces :(
- 4. Simplify For SmallerSpaces
- 9. Problem: Animation that isn’treadable on smaller viewports :(
- 10.
- 11. Solution 1: JavaScript &multiple timelines to the rescue!
- 15. 1 2 3 1timeline
- 16.
- 18. Solution 2: Responsive SVGto the rescue!
- 21. Responsive SVG Animation DifferentCSS 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 Directionto the rescue!
- 26.
- 27. Problem: Animation that isslow and sad on less powerful devices :(
- 29. Most Performant Properties transforms(position, scale, rotation…) opacity
- 30.
- 31. More Tricks the translate3D “hack” the will-change property
- 32.
- 33. Problem: Everyone hates waitingbut loading things takes time :(
- 34. Perceived Performance Hinting atcontent before it’s actually available makes wait times feel faster.
- 35. “Our findings indicatethat the psychological mechanism of transitions is completely different from progress bars”
- 38.
- 40.