Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

Dariel Noel has created a neat little JavaScript library for interface animations. It’s not the animations themselves that are interesting, it’s the syntax of how you apply them. Rather than write actual JavaScript, you do it right in the HTML by describing what you want to happen in a data-* attribute on the element, like:

<div data-anijs="if: click, do: flipInY, to: .container-box"></div>

Here’s a simple example:

See the Pen trnzk by Dariel Noel Vila Plagado (@darielnoel) on CodePen.

I mention it here, because the website for AniJS features a bunch of links to examples all over here on CodePen. We’re a little biased, but we think that’s a swell idea. Any newfangled front-end thing really should have a way you can not just see a demo, but play with it and give you the ability to quickly keep a copy for yourself.