Tuesday.css is The Hottest Animation Library Right Now

By Jake Rocheleau. in Toolkit. February 3, 2017.

By now you should already be familiar with Animate.css as the primary animation library among web designers.

But there’s a new kid on the block named Tuesday, and it’s taking web animation by force.

This new library isn’t a whole lot different in format or implementation. But Tuesday comes with a handful of new CSS animations that you can’t find anywhere else.

These new effects are much more subtle in nature so they really blend into a page nicely. Here’s a small list of the effects you can pick from:

Fade & expand
Fade & shrink
Stamp down & bounce
Angled swing
Drop in from left/right
Squash/stretch
Hinge

If you go through this list on the demo page you’ll notice that all the effects have one thing in common: physics.

They all feel very realistic to the basics of physics, and they seem to abide by the laws of gravity. None of these animations are over-the-top or extraneous. They’re subtle yet noticeable and more importantly, they’re believable.

I think Tuesday is one of the best modern CSS animation libraries because it presents a realistic view of web animation.

We shouldn’t be designing crazy interface effects that stand out like a sore thumb. Subtlety is always the name of the game because it creates a sense of interactivity from any user input whether it’s a click or a scroll.

The trouble has always been writing these animations from scratch and getting them to look just right. But now with Tuesday your worries can fly right out the door.

Just download a copy from GitHub and add the .css file to your page. You can actually use the CDN version straight from GitHub if you don’t want to download anything locally.

Once this is added to your web page, just append the .animate class along with any of the proprietary classes listed in the GitHub repo. Your code might look something like this:

<h1 id="header-text" class="animated tdDropInLeft">
  It's Tuesday.
</h1>

Take a look at the full documentation to see a list of all the in/out animation classes.

If you work with JavaScript you can also add these classes dynamically on click/hover events. This way you can add the animate class only when a user clicks a button, which will seem to animate on click.

There’s so much you can do with Tuesday, and it’s really the new Animate.css for pragmatic UI animations.

Take a peek at the demo page to see it live in action, and you can learn more by reading through their “in the making” post which talks about how the Shakr team created Tuesday.