June 19, 2015
All The Right Moves Screencast, css animation, design, ui-animation, video tutorial, web animation
UI Animation Reviews: Animation In Responsive Design – All The Right Moves Screencast from val head on Vimeo.
I’m back with another UI animation review episode for All The Right Moves! This time we’re looking at animation in responsive design.
Animations often need some space to move in, and with responsive design we know the space we have available is going to change. Balancing those two factors can lead to some tricky design problems. In this episode I look at how five different sites adjust their animation design decisions for different screen sizes.
In this episode I review:
- Rally Interactive’s 3D folding navigation.
- WHYY’s Pension Stories and their stacking data illustration SVG animations.
- Si Digital’s full page scrolling animated illustration.
- Legomushroom’s Bubble navigation demo.
- The motion on Stripe’s Dashboard for iPhone page.
I cover all of these examples from a design and art direction perspective. There are other factors to consider when it comes to animation and responsive design, of course. Things like performance and screen resolution also play a part. I’m saving those for future episodes though!
Don’t forget to check out the past episodes of All The Right Moves.
To learn more about web animation and using it in your own work, check out my course on CSS Animation and my UI animation resource page.
