Thinking of adding animations to your website? You can start NOW

If you think you'll need a ton of JS or that you'll need to learn and use a whole new library to create animations on the page, think again.

Usually, a little bit of CSS is all you need. Small wins is the name of the game. If you know a little CSS, you can start right now!

Animations can definitely be intimidating, but it doesn't have to be.

Good animations are the ones that move out of your way--the last thing you want is to inundate people with it (think about those PowerPoint presentations that are just filled with unnecessary transitions). It should complement the design of your website. That means: Your animation doesn't need to be flashy or complex!

Take a look at some of these websites and how simple the animations can be:

 

See? Half the time you don't even know they're there. Starting small is 🔑.

You can animate colors

If you have elements that change color such as links, you can start by adding a transition (transitions are animations!) to make the color change look smooth.

Here's an example of a color change that happens on :hover (hover on the link below):

Pro tip: Use the DevTools! Tweak the duration and the timing function until you get your desired effect. Make use of tools like Codepen or JS Bin to play around with code, too. Go ahead and experiment!

Here's another example with background transitions:

Psst! Need a refresher on transitions? Here are a few links to jog your memory:

You can animate shadows

Another thing that's common is animating shadows either on elements as box-shadow (to make it look like it's going closer or farther) or on text as text-shadow.

Try hovering over the button below:

You can animate images

My favorite example for showing off how tiny animations can add character to your website is probably Katie Kovalcin's website.

Just look at those little things moving around!

 

They might look complicated, but they're done with just a few SVGs and a little code for animation (for example, rotation).

Psst! If you need a refresher on CSS Animations, I made a short video just for you: CSS Animations for Beginners

Here's another animation that I found on Thoughtbot (hover on the gopher!):

And there you have it! Making use of the properties transition and animation can make a world of difference. You're only scratching the surface here, but you can already see how stuff you can do!

Try these things out and tell me what you think.

Did you enjoy this article? Don't miss my next post!

Comments