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.
Animate.css – CSS3 Library To Create Animation Easily
CSS has improved with many features which make web development much more interesting and challenging. One of these…Read more
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
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.
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.
There’s so much you can do with Tuesday, and it’s really the new Animate.css for pragmatic UI animations.
How to Use CSS3 Transitions & Animations to Highlight UI Changes
Designers and artists have a long history of experimenting with motion, effects, and different kinds of illusions with…Read more