animation in responsive design
TRANSCRIPT
![Page 1: Animation In Responsive Design](https://reader031.vdocuments.site/reader031/viewer/2022021922/58718e011a28ab2c198b6dc7/html5/thumbnails/1.jpg)
![Page 2: Animation In Responsive Design](https://reader031.vdocuments.site/reader031/viewer/2022021922/58718e011a28ab2c198b6dc7/html5/thumbnails/2.jpg)
![Page 3: Animation In Responsive Design](https://reader031.vdocuments.site/reader031/viewer/2022021922/58718e011a28ab2c198b6dc7/html5/thumbnails/3.jpg)
Problem: Motion that becomes distracting
in smaller spaces
:(
![Page 4: Animation In Responsive Design](https://reader031.vdocuments.site/reader031/viewer/2022021922/58718e011a28ab2c198b6dc7/html5/thumbnails/4.jpg)
Simplify For Smaller Spaces
![Page 5: Animation In Responsive Design](https://reader031.vdocuments.site/reader031/viewer/2022021922/58718e011a28ab2c198b6dc7/html5/thumbnails/5.jpg)
![Page 6: Animation In Responsive Design](https://reader031.vdocuments.site/reader031/viewer/2022021922/58718e011a28ab2c198b6dc7/html5/thumbnails/6.jpg)
![Page 7: Animation In Responsive Design](https://reader031.vdocuments.site/reader031/viewer/2022021922/58718e011a28ab2c198b6dc7/html5/thumbnails/7.jpg)
![Page 8: Animation In Responsive Design](https://reader031.vdocuments.site/reader031/viewer/2022021922/58718e011a28ab2c198b6dc7/html5/thumbnails/8.jpg)
![Page 9: Animation In Responsive Design](https://reader031.vdocuments.site/reader031/viewer/2022021922/58718e011a28ab2c198b6dc7/html5/thumbnails/9.jpg)
Problem: Animation that isn’t readable
on smaller viewports
:(
![Page 10: Animation In Responsive Design](https://reader031.vdocuments.site/reader031/viewer/2022021922/58718e011a28ab2c198b6dc7/html5/thumbnails/10.jpg)
Responsive Choreography
![Page 11: Animation In Responsive Design](https://reader031.vdocuments.site/reader031/viewer/2022021922/58718e011a28ab2c198b6dc7/html5/thumbnails/11.jpg)
Solution 1: JavaScript & multiple timelines to the rescue!
![Page 12: Animation In Responsive Design](https://reader031.vdocuments.site/reader031/viewer/2022021922/58718e011a28ab2c198b6dc7/html5/thumbnails/12.jpg)
![Page 13: Animation In Responsive Design](https://reader031.vdocuments.site/reader031/viewer/2022021922/58718e011a28ab2c198b6dc7/html5/thumbnails/13.jpg)
![Page 14: Animation In Responsive Design](https://reader031.vdocuments.site/reader031/viewer/2022021922/58718e011a28ab2c198b6dc7/html5/thumbnails/14.jpg)
![Page 15: Animation In Responsive Design](https://reader031.vdocuments.site/reader031/viewer/2022021922/58718e011a28ab2c198b6dc7/html5/thumbnails/15.jpg)
1 2 3
1 timeline
![Page 16: Animation In Responsive Design](https://reader031.vdocuments.site/reader031/viewer/2022021922/58718e011a28ab2c198b6dc7/html5/thumbnails/16.jpg)
3
2
1 timeline
timeline
timeline
![Page 17: Animation In Responsive Design](https://reader031.vdocuments.site/reader031/viewer/2022021922/58718e011a28ab2c198b6dc7/html5/thumbnails/17.jpg)
![Page 18: Animation In Responsive Design](https://reader031.vdocuments.site/reader031/viewer/2022021922/58718e011a28ab2c198b6dc7/html5/thumbnails/18.jpg)
Solution 2: Responsive SVG to the rescue!
![Page 19: Animation In Responsive Design](https://reader031.vdocuments.site/reader031/viewer/2022021922/58718e011a28ab2c198b6dc7/html5/thumbnails/19.jpg)
![Page 20: Animation In Responsive Design](https://reader031.vdocuments.site/reader031/viewer/2022021922/58718e011a28ab2c198b6dc7/html5/thumbnails/20.jpg)
![Page 21: Animation In Responsive Design](https://reader031.vdocuments.site/reader031/viewer/2022021922/58718e011a28ab2c198b6dc7/html5/thumbnails/21.jpg)
Responsive SVG AnimationDifferent CSS animations at different breakpoints
Adjusting SVG viewBox property with JavaScript breakpoints
See Sarah Drasner’s Complex Animations slides: slides.com/sdrasner/cssdevcon
![Page 22: Animation In Responsive Design](https://reader031.vdocuments.site/reader031/viewer/2022021922/58718e011a28ab2c198b6dc7/html5/thumbnails/22.jpg)
Solution 3: Art Direction to the rescue!
![Page 23: Animation In Responsive Design](https://reader031.vdocuments.site/reader031/viewer/2022021922/58718e011a28ab2c198b6dc7/html5/thumbnails/23.jpg)
![Page 24: Animation In Responsive Design](https://reader031.vdocuments.site/reader031/viewer/2022021922/58718e011a28ab2c198b6dc7/html5/thumbnails/24.jpg)
![Page 25: Animation In Responsive Design](https://reader031.vdocuments.site/reader031/viewer/2022021922/58718e011a28ab2c198b6dc7/html5/thumbnails/25.jpg)
![Page 26: Animation In Responsive Design](https://reader031.vdocuments.site/reader031/viewer/2022021922/58718e011a28ab2c198b6dc7/html5/thumbnails/26.jpg)
Animation & Performance
![Page 27: Animation In Responsive Design](https://reader031.vdocuments.site/reader031/viewer/2022021922/58718e011a28ab2c198b6dc7/html5/thumbnails/27.jpg)
Problem: Animation that is slow and sad on less
powerful devices
:(
![Page 28: Animation In Responsive Design](https://reader031.vdocuments.site/reader031/viewer/2022021922/58718e011a28ab2c198b6dc7/html5/thumbnails/28.jpg)
![Page 29: Animation In Responsive Design](https://reader031.vdocuments.site/reader031/viewer/2022021922/58718e011a28ab2c198b6dc7/html5/thumbnails/29.jpg)
Most Performant Propertiestransforms (position, scale, rotation…)
opacity
![Page 31: Animation In Responsive Design](https://reader031.vdocuments.site/reader031/viewer/2022021922/58718e011a28ab2c198b6dc7/html5/thumbnails/31.jpg)
More Tricksthe translate 3D “hack”
the will-change property
![Page 32: Animation In Responsive Design](https://reader031.vdocuments.site/reader031/viewer/2022021922/58718e011a28ab2c198b6dc7/html5/thumbnails/32.jpg)
dev.opera.com/articles/css-will-change-property/
![Page 33: Animation In Responsive Design](https://reader031.vdocuments.site/reader031/viewer/2022021922/58718e011a28ab2c198b6dc7/html5/thumbnails/33.jpg)
Problem: Everyone hates waiting but loading
things takes time
:(
![Page 34: Animation In Responsive Design](https://reader031.vdocuments.site/reader031/viewer/2022021922/58718e011a28ab2c198b6dc7/html5/thumbnails/34.jpg)
Perceived Performance Hinting at content before it’s actually available
makes wait times feel faster.
![Page 35: Animation In Responsive Design](https://reader031.vdocuments.site/reader031/viewer/2022021922/58718e011a28ab2c198b6dc7/html5/thumbnails/35.jpg)
“Our findings indicate that the psychological mechanism of transitions is completely different from progress bars”
![Page 36: Animation In Responsive Design](https://reader031.vdocuments.site/reader031/viewer/2022021922/58718e011a28ab2c198b6dc7/html5/thumbnails/36.jpg)
![Page 37: Animation In Responsive Design](https://reader031.vdocuments.site/reader031/viewer/2022021922/58718e011a28ab2c198b6dc7/html5/thumbnails/37.jpg)
![Page 38: Animation In Responsive Design](https://reader031.vdocuments.site/reader031/viewer/2022021922/58718e011a28ab2c198b6dc7/html5/thumbnails/38.jpg)
viget.com/inspire/experiments-in-loading-how-long-will-you-wait
![Page 39: Animation In Responsive Design](https://reader031.vdocuments.site/reader031/viewer/2022021922/58718e011a28ab2c198b6dc7/html5/thumbnails/39.jpg)