Websites don’t need to look like newspapers. They don’t need to just be static lines of text with an image or two anymore. The internet is like a super TV showing a choose-your-own-adventure story that can look like and do whatever it wants. There was a time when moving images took up too much computing power to be worth including on a web page, but all that has changed. It’s now easier than ever to incorporate moving parts and animations to your website and create a more fun experience for your users.

CSS3 and JavaScript can now perform enough complex animations to bring a page to life in a way that only flash could in the past. Now flash is a bad word and with a little bit of coding you can let the browsers do the heavy lifting. Buttons can move and expand. Vectors can transform and change colors at a controllable pace. It can be as little as a title or image fading in or a page could be a full blown interactive cartoon. This can all be accomplished with a small amount of code that won’t bog down a browser or eat up data.

Good animation will make the user’s experience better. This can be in the form of an emotional connection – such as a fun, positive experience – or by making a site easier to use.

-Carrie Cousins, DesignShack.com

There are lots of tutorials out there for animating with CSS5. A fun and easy way to play with it while learning is to experiment with a CSS3 Animation Generator. Sites like this allow you drop and drag shapes and text on a timeline, and then spit out code you can drop into your editor. You can then chop it up and dissect it and see how it all works. Having a built in timeline makes CSS animations pretty powerful, and can jump start a narrative. Watching a few tutorials and then just playing with the code in your editor is the best way to jump into it.

JavaScript has lots of animation functions as well, and while a bit more complicated than the CSS, they aren’t to difficult to learn. Again, I would point you towards tutorials. There is just too much to explain in the short time I’ve decided to spend on this topic. One great JavaScript resource for animation is GreenSocks, go check that link right now. GreenSocks works a lot like a JQuery. You get a page of scripts to add to your code or link to, and then a library that makes animation. It includes time lines, vector manipulation, color changes and easing. It’s really easy to learn as far as learning JavaScript goes.

Even though flash is ending, the tool that made it has been updated to live on with out it. AdobeFlash is now AnimateCC and it is an incredible tool for making web and mobile friendly interactive timeline animations. You can make actual high quality HD cartoons with links in this program and output them in browser friendly HTML with JavaScript or without links as videos. It’s part of the Creative Cloud package, so most of you designers already have it anyways. Definitely check it out, some of your favorite cartoons used it to make their pilot episodes. Flash may be dead, but AnimateCC is more powerful than ever. Don’t sleep on this application.

Animation is great, it can be everything from a narrative to a button changing color when clicked. Clients love having that little something that makes their site different, and a little bit fun. Animation is just making use of tools that we already have and are most likely being wasted. A great way yo get started is to pick a link on your homepage that you want users to click. Make that button move or change color or size just a tiny bit. Watch your analytics for a couple days and see if that link gets clicked. Humans are hard wired to respond to movement and there is no reason to not use it that to your advantage.

 

Here’s a good CSS animation tutorial to get you started-

http://https://youtu.be/jgw82b5Y2MU