Animation

Moving backgrounds look cool, but they're not always a good idea. Learn their pros and cons, and when might be a good time to use one.

Giannis introduces us to Microsoft's new design language — Fluent Design System — and explains how to implement its design concepts into Windows UWP apps.

Our #1 design writer, Gabrielle, talks about the most astonishing artists and designers to follow on Behance when you need an inspiring creativity boost.

Despite being invite-only, Dribbble is crawling with talented designers. Gabrielle narrows it down to the 12 best Dribbble designers to follow.

Simon Codrington illustrates some stunning UI design ideas using CSS animation and gradients to inspire your creativity for your next website project.

GIFs are the jokers of the web image formats – usually funny and playful. But can they be turned into a dangerous weapon in the right situation?

Trends are interesting, but more important is how these 2017 web design and UX trends boost conversions.

Animating elements in your mobile application is easy. And doing it the right way is easy, too... if you follow our tips here.

Often our goals and those of our user are in alignment – but not always. Sometimes you have a devil on one shoulder and an angel on the other.

The GIF format has been around for so long that sometimes it's easy to overlook its usefulness. Tim wants you to reconsider the power of GIFs and CSS.

We all think carefully about choosing a color, but – as Heider and Simmel show – the way an object moves can have a profound impact on how we feel about it.

Modern user interfaces move. But as Fun Boy Three and Bananarama once said, "T'aint what you do, it's the way that you do it!". Let's talk about easings.

Cinemagraphs are like the snow globes of the web – simple yet strangely mesmerizing. Here's how to use them in your web design.

Watching an SVG image drawn onto screen is powerful effect. Ivaylo shows you how to create the 'Invisible Pen' Effect in SVG using Vivus.js

Micro-interactions are subtle “moments” centered around accomplishing a single task. Daniel shows how they count for UI designers.

While the background video trend might not be an automatic usability fail, that doesn't mean you can't get it wrong. Stephen looks at the wins and pitfalls.

SVG is powerful, but finding a place to put your image is harder than it should be. Here's a scalable, reliable, free SVG image hosting method.

Codepen has become a vast repository of some of the best in front-end UI thinking. Sarah has put together a short list of handy snippets from Codepen.io

SVG is hot but easily corrupted. Boxy SVG is a free editor that helps you make the most of what the SVG format is good at.

How many gigantic-background-photo sites do we really need? Illustration is a sure-fire way to give your designs a 100% authentic, bespoke finish. 

There's a nice video effect I'm going to call 'Parallax Ken Burns' you see on a lot of documentaries. Can we mimic it in a single SVG file? Maybe.

As 2016 starts to ramp up, we're starting to see strong trends emerging. Zack is on point with a list of the defining styles of the year.

Perhaps one day we'll be able to deliver pages instantly - until then, we need to manage the times users do wait. Aja has some great strategies.

Like great music, good web design shouldn’t be all about flashy tricks and visual theatrics. It must actually perform.

Dennis Williams looks at 7 of the best resources for creating animations to bring dazzle and delight to your mobile web and native apps.

Good web animation is often a paradox - the better it gets, the harder it is to notice. Gabrielle has 4 tips for using animation in your projects.

Animation is as important to our modern UIs as buttons and menus. Daniel shows us how to prototype complex animations with Atomic.io

Last week Tiffany Brown, author of CSS Master, joined us on the forums for a Q&A session discussing CSS Animations. Read the highlights of her conversation.

Prototyping apps is hard. The easier they are to use, the more control you lose. Mateo shows you how to create rich prototypes with Origami without coding.

In this screencast I'm going to show you how to refactor your CSS to improve and smoothen your animations.