Animation — SitePoint

Boxy SVG: A Fast, Simple, Insanely Useful, FREE SVG Editor

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.

Design 2016: The Year of Illustration?

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. 

Parallax Burns: Converting Photographs from 2D to 3D with SVG

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.

7 Trends That Will Define Web Design in 2016

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.

How to Make Your Users Enjoy Waiting

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.

5 Fancy (But Useless) Web Components You Should Avoid

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

4 Tips for Using Animation in Design

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.

Top 9 Animation Libraries to Use in 2016

We don't have to always re-invent the wheel when creating animations. Tanay runs through the 9 best animation libraries to use in 2016.

How to Handle Complex Animations with Ease in Atomic.io

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

Origami: How to Build Terrific Prototypes in Minutes

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.

7 Simple Rules for Creating Elegant UI Interactions

In 2015 it's no longer enough for interface elements to instantly switch between two static states. Petras has 7 tips for making your interactions sing!

Code-Free Scrolling Animations and Micro-Interactions with Webydo

Daniel Schwarz uses Webydo's advanced parallax scrolling tools to produce a Monty Python-inspired site in no time.

Bounce.JS: Create Complex CSS Animations Fast

Getting your head around CSS animation can be tricky but Elio has a great tool to get you started. Bounce.js is free, funky and functional.

Talkin’ CSS, Animation and X-Men with Rachel Nabors

Animator and CSS sorcerer Rachel Nabors spent some time with us talking about the future of animation on the web before her FOWD workshop in April.

The Animation Keyframe Gotcha