Animation In Responsive Design
•5 likes•3,158 views
Report
Share
Download to read offline
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/
More Related Content
More from Val Head
More from Val Head(6)
Recently uploaded
Recently uploaded(20)
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 :(
- 11. Solution 1: JavaScript & multiple timelines to the rescue!
- 15. 1 2 3 1 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!
- 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
- 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”