Best Tools & Webapps To Animate Your Website

Web animation is a great way to capture attention and improve visual aesthetics. CSS and JavaScript both offer animation solutions, and between both of them you can create almost any animation you want.

But how should you get started? Some developers like to write their animations from scratch. But others use online tools to generate custom animation code.

In this post I’ll share a few of these tools which generate code to help you animate your website without reinventing the wheel.

CSS Hero Animator

animator hero custom generator

One of the newest online tools is the Animator plugin by CSS Hero. It ties directly into WordPress so you can animate frontend content and page elements from scratch.

This is a free download and it’s very powerful for WP users who don’t like to write code. While in the Animator editor you simply click any page element to select it. Then you customize your animation options to set loops, speed, and timing.

As of right now this plugin is only available for WordPress. It would be great to have this as a standalone tool to generate custom animations for any site, but it’s just as useful on WordPress too.

CSS Animate

css animate webapp generator

If you’re looking for a more typical webapp generator then check out CSS Animate. This tool generates code for your own custom animations which rely on keyframes.

Multiple panels allow for various customizations like scale, opacity, duration, and element position. There’s even a timeline panel for you to edit different markers and to play/pause the animation at will.

This is one of the best keyframe animation tools on the web. It’s completely free and offers everything you’d need to generate a useable keyframe animation.

I will admit the learning curve is a bit steep at first. But once you play around with the features you’ll quickly learn how it works and how to create tangible animations for your projects.

Stylie

stylie webapp free css generator

Yet another basic CSS animation tool is Stylie created by Jeremy Kahn. I actually prefer this interface a little more because it’s so much cleaner.

The customization features are hidden behind tabbed boxes off to the side of the page, causing more steps during the animation process. But I also feel the learning curve is much easier to follow than CSS Animate.

Stylie was released for free as an open source project on GitHub. The webapp is hosted on GitHub pages but you can also download a copy to use locally.

And you can even watch a free screencast tutorial explaining how Stylie works. That’s pretty darn cool in my book.

Stylie is undeniably one of the best keyframe animation tools on the web. It’s just so simple and intuitive that it’s perfect for developers and webmasters alike.

BounceJS

bounce js open source animation

The free Bounce.js webapp helps you create animated easing effects built on top of JavaScript. It’s a completely free animation library available on GitHub.

Since it does have a separate JS file you need to include the library into your website before animations happen. But the online BounceJS tool also makes it super easy to generate raw JS/CSS animation code.

After first landing on the page you’ll be greeted with multiple bouncing animations. These rely on Bounce.js offset properties to delay animations for a certain period of time. You can edit everything from the “Add Component” button in the top-left corner.

Pre-built easings are available to help you along the way. Sticky-style bounce animations are very popular and they’re perfect for modern web interfaces.

WAIT! Animate

wait animate css delay generator

If you’re looking for a way to repeat animations with custom delays then check out WAIT! Animate. This free tool generates CSS code to help you control how certain elements animate on the page.

By default it’s possible to offset CSS animations before they run, but not between loops of the same animation. The point of WAIT! Animate is to solve this problem.

Now you can generate animations that run continuously with a delay in the middle each time. It may not be valuable for every project but it’s definitely a powerful tool in your web animation arsenal.

Cubic Bezier Generator

cubic bezier css generator

Modern web animations can be customized on top of the cubic-bezier() method. This is rather complicated to work with unless you have some expertise in CSS animation.

But thankfully there’s an easier way to do this with the Cubic Bezier webapp. It gives you all the tools you need to edit custom animations based on a bezier curve.

You can select from default animations or customize your own by dragging the bezier handles. It’s a fun little webapp to help you create very basic CSS transition animations.

Angry Tools Animation Kit

animation kit angry tools generator

This Animation Kit is one more handy CSS tool for web development. It’s completely free and allows you to generate CSS code from scratch with defined animation presets.

This way you can add custom animations onto just about anything. You get access to delays, timing functions, durations, and lots of other simple CSS animation properties.

The live preview window shows all your edits in real time. You also get code output windows for the HTML/CSS code to copy and paste into your project.

All of these tools are simply incredible for building custom CSS animations from scratch. It’s amazing to see how much is possible with free webapps.

And if you’re looking for more web animation resources then check out these related posts.

Start Your Own Freelance Business!

Learn how I went from a corporate employee to owning my own freelance business and blog. Sign up for my email newsletter and get a FREE copy of my Ebook plus a coupon for 10% off your first billing cycle on any Vandelay Premier plan!

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.