Create slick UI animations

A team page showing team member photos, names and job titles with rollover animation that shrinks the size of the profile image, brings down a coloured circle from the top and brings up social media icons from the bottom.

More and more frequently, designers and developers are acknowledging the importance of motion design in the context of user experience. Animation on the web is no longer a way to delight and wow the user but a functional tool that makes experiences easy, fun and memorable. And there are a number of different tools and approaches available, from CSS animation to techniques using Bootstrap or HTML. 

Animation in the context of user interfaces is still a very new field. There aren’t many resources out there that teach best practice or show common patterns of UI animation that we can follow. Most of the time, it’s about experimentation, user testing and perhaps a bit of trial and error. 

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

Neil is an all-round frontend developer who's interested in style guides, pattern libraries and architecture.