Create slick HTML5 animations

Modern mobile operating systems have made animated user interfaces the standard of computer interaction – and have shown that fluid and well chosen animations create immersing effects and favour intuitive interactions. We all take for granted that you can set a list into motion with a flick of the finger and that it will keep going as if it had weight and inertia until it bumps against its end and bounces back a little. However, on the web we are not quite there yet.

Let’s face it, animations on the web have often been synonymous with UI disasters, starting with the <blink> tag almost two decades ago. Flash could have helped but its lack of integration into the HTML DOM turned most Flash sites into 800x600 unresizable pits of UI despair. Then JavaScript DOM manipulation came along with its signature five frames per second (fps) animation rate – so sweet!

In 2013, it’s time to sit back and relax. Modern browsers have several dedicated animation technologies built in, which run at 60 fps. Now is the time to forget about the past and start building UI experiences with tasteful animations that help the user feel at home. I would like to take you on a guided tour of the four animation technologies the modern web has to offer to help you decide which one is right for your project.

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of eight full-time members of staff: Editor Georgia Coggan, Deputy Editor Rosie Hilder, Ecommerce Editor Beren Neale, Senior News Editor Daniel Piper, Editor, Digital Art and 3D Ian Dean, Tech Reviews Editor Erlingur Einarsson and Ecommerce Writer Beth Nicholls and Staff Writer Natalie Fear, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.