Skip to main content

Create an animated interface

Ever wondered how to create a smoothly animated interface for your website, without using Flash?

Based on a grid of images that expand smoothly when you drag your mouse over them, this project feels like Flash, but is all done with JavaScript and CSS. Television production company Lion and digital agency Numiko used this technique to build their Britain From Above site for the BBC, and the site went on to scoop an Interactive Emmy.

As a visual interface it's extremely versatile, and would make an excellent portfolio site for a photographer or illustrator, for instance. In this project we design the image grid in Photoshop, then explain the code to get it working.

Click here to download the support files (10.3MB)

Click here to download the tutorial for free

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 six full-time members of staff: Editor Kerrie Hughes, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, and Staff Writer Amelia Bamsey, 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.