Build, Tweak, & Play with CSS Animations on Animista

One of the most essential parts of web development is finding the right look-and-feel for what you’re building. When working on a project, web designers experiment with tons of themes, customizations, animations, and other aspects to find exactly what they or their clients like. And CSS plays a major role in such web designing. Typically, web designing with CSS involves putting in the code, watching how it turns out on the website, tweaking the code a bit, then again watching the results, and so on. It’s an iterative process involving considerable time and effort. And for someone who’s new to CSS, the whole thing can turn into a nightmare since he’d have to research to find the exact lines of code that can result in the effect he want.

Although it’s a part of the job, it is natural for designers to feel exhausted and frankly, annoyed with it after some time. But that’s just how the process goes. There isn’t really anything anyone can do about it right?

Well, not actually! With Animista, a lot can be done to ease CSS based web designing; actually to the point of making it click-based. Want to know how?

Animista – the wonder tool for creating and testing CSS on the fly!

Animista is a place where you can play with a collection of pre-made CSS animations, tweak them and save only the ones you actually wish to use. It’s like a supermarket for CSS animations. You visit, you tweak and play around, you consider options, and you pick the stuff you like. The online tool contains a considerable amount of animations that have been organized in a meaningful and accessible way so that they can be easily reused on different projects. What started off as a small personal project for a web designer, has shaped into this online playground which contains a collection of pre-made animations that can be tested with various options like easing, delay, duration and others. Once a user is satisfied with his selections, all he needs to do is save the code for the animation and he’s done. The work which would have taken hours to research, build, and test, squeezed into the work of minutes – that’s Animista for you!

Here are the best features of the tool at a glance:

• Generates CSS animation code at the click of a button
• Contains pre-designed motions like slides, transforms, swings, shade dump animations, and more
• Supports exporting generated code
• HTML5 FileSystem API based downloads supported in Chrome browser

Now, let’s start playing!

This is how it rolls

The tool’s homepage is a bit confusing to be honest, but you can view that as a sign of uniqueness too. When you visit the page, all you can see in the name of the tool and a ‘Try Me’ button next to it. That’s it! No scroll-bars, no menus, no footers, nothing. For a moment you start wondering if the page has loaded properly or are some elements still pending. Once you’ve figured out that you need to click on ‘Try Me’ to proceed, you’ll land up on the tool’s dashboard. And everything will instantly become clear.

Here’s the working of the tool explained step-wise:

• Instead of the black box in the center of the screen, select an object which gets affected by animations. For this click on the drop-down named “select object” in the Options section on the left (try the card (hor-flip) 3D object)
• Browse through animation options displayed within circles on the top and play with various options like easing, delay, duration etc. You should be able to see how they affect the animation on the spot
• You can change animation attributes through the Options section of the left. Everything will show results instantly
• When you see something you like just hit the ‘heart’ icon on the upper-right corner of the animation panel. Once you do this, several options will become available on the top-right corner of the screen.
• Rinse and repeat until you are happy with your picks. You can see your favorites at any time by hitting the “Funnel” button or click the “Trash” button to start from scratch.
• When you are ready, head to download screen by clicking the ‘Download’ button or download link in main navigation. If you use Chrome browser, hit the download button and check your download folder. If everything went well the ‘animista.css’ file should be there.
• Alternatively, you can generate the code for the animation by clicking on the “curly braces” icon on the upper-right corner of the animation panel. When you see the code, simply copy it and paste it into your favorite code editor.

What we like and what needs to be improved

Needless to say, a tool that offers such flexibility, variety of options, and ease-of-use and is also free is a clear cut winner. However, Animista does have a lot to improve on. This includes direct download support for browsers other than Chrome, more object options, and a brief explanation of what the different options on the left exactly do (it’s mostly try and find out for beginners right now).

• Build, Tweak, & Play with CSS Animations on animista.net/ @cssanimista via @supermonitoring

  Tweet this

Verdict

We like Animista, and so do a lot of designers across the globe. A few more enhancements and sometime later this tool could be one of the simplest-yet-most-useful tools out there.