A Guide For Adding Animations In Your Website Design

published on: December 27th 2019

What is trending in website development and design is constantly changing. Depth to flat, chaotic to minimalist layout, and recently the wide use of animation. It's why we stay on top of things, isn't it? There are many ways to add animations to a website. You can use JavaScript, CSS key-frames and transitions, and numerous libraries like GSAP. Animations, done right, add an element of excitement and entertainment that can keep a viewer on your site longer. Done wrong they can create a mass of confusion. So, when is it appropriate to use Animations in your website design? How should you use them? These are hard questions to answer. It's kind of like adding salt while cooking. When is it too much? Not enough? The wrong seasoning all together?

We put animations on our site to slide in sections and images just for a little pop, but our type of site doesn't really warrant animations outside of "something" on scroll in view. We use a few fade on hover techniques on our blog post images, but try and keep our website straight forward. That said, we are often asked to put in animations by clients - sometimes it's a good idea and other times we try to talk them out of it. Sometimes they listen and sometimes they don't. We have a few pseudo-guidelines we think are a good idea to follow.

Use multi-directional slide-in and slide-outs

If you want to animate directional movement by elements in the same section, we recommend having them come or go from different quadrants of the page. An example would be having the heading slide in from above while section slides in from another quadrant meeting simultaneously in their positions. That multi-directional approach always seems smooth and well orchestrated. When correctly timed with scrolling into view it can be quite impressive.

Use uniform page transitions and reveals

Creative page transitions and image reveals are awesome. We get it. Keep them all the same at least on the page transition level. Maybe it's just us, but a different page transition for every page is annoying... unless you are selling page transitions. Hear us out on this. Imagine watching a movie wherein every scene change had a completely different transition. Trust us it would get annoying quick. Still not on board. How about a book that changed it's font every other page? There is a reason why entertainment creators don't do change for the sake of it. People like symmetry and uniformity. Anything that breaks this, even if interesting on it's own, quickly becomes annoying when taken in it's totality.

Now, within a page, multiple types of transitions work fine as long as you keep the choices consistent. If you fade in headings and scale in images keep it that way. Don't switch halfway down the page. Again, imagine watching a single movie scene where the director had every camera angle switch done with a different transition. Hopefully you are getting our point.

Don't use rotations and bounce etc...

Okay, we shouldn't even have to explain this. Very few websites need to display rotating headlines or bouncy elastic transitions. You had better be selling a fun little exciting product and not homes or lawyering. Get that? Good. Yes!!! we use a transition called light speed on a heading on our homepage that animates it's zipping in from off screen on scroll into view, but it is a headline that reads "Web Design just Got Blazingly Fast". Just use common sense here. Not everything that can be done...should be. Less is more.