Spice Up your Web Content with Animation in 5 Minutes

Blog CSS Animation SVG

Last updated May 19, 2016

Animation is perhaps the most effective tool for grabbing the attention of your audience. When you see a cool motion graphic on an otherwise static page, it will be the first thing your eye is drawn toward. If you’re marketing a product, this can be a highly effective way to bring a visitor’s attention to your call-to-action.

As of 2016, modern browsers and devices have significantly improved support for the combination of Scalable Vector Graphics (SVG) with CSS3 Animation.

Alas, the process of SVG animation requires a great deal of time to be spent on graphic design and animation tinkering. First you need to develop a high quality vector graphic, then you need to write the animation code in CSS or Javascript. If you’re using JavaScript, you’ll also likely need to manage a 3rd party animation library. If you’re animating with vanilla JS, good luck to you. Not to mention concerns about device compatibility, graceful fallbacks, testing, etc.

Fortunately, a new concept has been developed to sort out these concerns and provide developers with quick access to high quality SVG animations.

Animated Images for Web Developers by SVGnarly

SVGnarly products are predesigned vector graphics with built in CSS3 animations. They can be dropped into your project as-is, or the underlying code can easily be customized. Because they are CSS based, all styling and animation can plopped into a single image file. They come with human-readable class names, so customization is as easy as editing CSS for a basic HTML page.

A Few Animated SVG Favorites

An animated heartbeat can communicates the mutual feelings of love between an app and its users.

The lonely cactus and tumbleweed is great for showing a user that that is no activity on their account.

DNA can show the complexity and forward-thinking that goes into a project.


Lesson Checkpoints