Animation
![Getting Started with Lottie.js](https://uploads.sitepoint.com/wp-content/uploads/2022/06/1656484204lottie-opt.gif)
Lottie.JS is a fantastic animation platform, but what animation tool should you choose? Alex has the ideal Lottie primer.
![UI Design Inspiration: Do You Think About Your Textures?](https://uploads.sitepoint.com/wp-content/uploads/2022/06/1655692417featrue-pattern.jpg)
Looking for UI design inspiration? Rather than adding a new color or changing a font, have you thought about your textures?
![Moving Backgrounds: When, Why, and How to Use Them](https://uploads.sitepoint.com/wp-content/uploads/2021/06/1623901012moving-backgrounds.png)
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.
![Introducing Microsoft’s Fluent Design System](https://uploads.sitepoint.com/wp-content/uploads/2017/09/1505245234Fluent_Design.jpg)
Giannis introduces us to Microsoft's new design language — Fluent Design System — and explains how to implement its design concepts into Windows UWP apps.
![7 Astonishing Artists and Designers to Follow on Behance](https://uploads.sitepoint.com/wp-content/uploads/2017/08/1503408033mlbVqGi.jpg)
Our #1 design writer, Gabrielle, talks about the most astonishing artists and designers to follow on Behance when you need an inspiring creativity boost.
![12 of the Best Dribbble Designers to Follow](https://uploads.sitepoint.com/wp-content/uploads/2017/06/1497905285dan-in-studio.jpg)
Despite being invite-only, Dribbble is crawling with talented designers. Gabrielle narrows it down to the 12 best Dribbble designers to follow.
![Inspirational UI Design Ideas for Your Next Website Project](https://uploads.sitepoint.com/wp-content/uploads/2017/05/1494773754creative-ui-designs.png)
Simon Codrington illustrates some stunning UI design ideas using CSS animation and gradients to inspire your creativity for your next website project.
![Killer GIFs: How Can an Animated GIF Become a Weapon?](https://uploads.sitepoint.com/wp-content/uploads/2017/03/149017647720151104_141937.gif)
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?
![10 Web Design & UX Trends for 2017 That Can Boost Conversions](https://uploads.sitepoint.com/wp-content/uploads/2017/02/1487592497age.jpg)
Trends are interesting, but more important is how these 2017 web design and UX trends boost conversions.
![Achieve 60 FPS Mobile Animations with CSS3](https://uploads.sitepoint.com/wp-content/uploads/2017/02/148773670614782578092_0bd686ec10_z.jpg)
Animating elements in your mobile application is easy. And doing it the right way is easy, too... if you follow our tips here.
![Dark UX: Dirty Tricks and Tactics to Avoid in 2017](https://uploads.sitepoint.com/wp-content/uploads/2017/01/1483925251Girl-Darkux.png)
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.
![5 Ways to Delight with UX Details Combining GIFs and CSS](https://uploads.sitepoint.com/wp-content/uploads/2017/01/1484084925GIF.png)
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.
![UI Motion : Can You Tell a Story with Movement?](https://uploads.sitepoint.com/wp-content/uploads/2016/12/1481171019bodyrock.jpg)
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.
![Animations: Using Easings to Craft Smarter Interactions](https://uploads.sitepoint.com/wp-content/uploads/2016/11/14803932386a00d8341c72e153ef01538e220eda970b-800wi.jpg)
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.
![How to Hack Brains with Cinemagraphs](https://uploads.sitepoint.com/wp-content/uploads/2016/11/1479885000snow-dome.gif)
Cinemagraphs are like the snow globes of the web – simple yet strangely mesmerizing. Here's how to use them in your web design.
![The Best Way to Create Fantastic ‘Invisible Pen’ Effects in SVG](https://uploads.sitepoint.com/wp-content/uploads/2016/11/14790856839FQnN3f-Imgur.png)
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
![How to Lift Your UX Out of the Ordinary with Micro-Interactions](https://uploads.sitepoint.com/wp-content/uploads/2016/10/1477350938404.jpg)
Micro-interactions are subtle “moments” centered around accomplishing a single task. Daniel shows how they count for UI designers.
![The Movement Towards Motion in Website Backgrounds](https://uploads.sitepoint.com/wp-content/uploads/2016/10/1477010404ezgif.com-optimize-17.gif)
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.
![Why SVG Image Hosting is Hard (… and How to Do It)](https://uploads.sitepoint.com/wp-content/uploads/2016/06/1469285337svg.jpg)
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.
![Quick Tip: 4 Really Useful, Re-Useable Code Snippets from Codepen](https://uploads.sitepoint.com/wp-content/uploads/2016/05/1469285951snippets.jpg)
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.