Easy animations with Animate.css

Animations have never been easier

For our group project, we decided to tackle a real-time, two-player Pokemon game. We realized we needed a lot of responsive animation in order bring our game to life.

Fortunately for us, Bulbapedia has many animated GIFs available for free for nearly every Pokemon. In addition, one of the members on my team was proficient with PhotoShop and quickly made some additional animated GIFs for us.

We then pieced together our animated GIFs along with our static Pokemon images in order to simulate a Bulbasaur tackling and receiving damage. This seemed to work well visually, but scalability was a concern. In order for our animations to activate based on the click of the user’s mouse, we had to keep manually replacing one image or GIF with another. The numerous image files on our page for each Pokemon also got tricky to keep track of.

At that point, I had moved on to working on animating some of the text in our game. When I first started researching JavaScript text animations, I came across a plugin called Textillate. Textillate offers fancy, unique text animations by combining several libraries, one of them being Animate.css. I soon realized that Animate.css would allow us to perform many of the animations we needed by just including that one CSS file in our code. Best of all, the animations worked as well on our Pokemon as they did on plain text. By just adding the classes of “animated” plus the name of the specific animation to our jQuery elements, we could get our Pokemon to flicker, shake, or even roll off screen upon fainting.

Once we decided to use Animate.css for all of our animations, we were able to downsize to only two static images per Pokemon on our page. The jQuery addClass function was easily linked with our attack buttons.

Even though many games require more complex animation than what Animate.css can provide, it can still serve as a great placeholder while the initial functionality of the game is being built out.

Test out Animate.css for yourself at the link below:

http://daneden.github.io/animate.css/