# The Coolest New CSS Animation Library For Web Developers!

**URL:** <https://onehack.st/t/the-coolest-new-css-animation-library-for-web-developers/203051>\
**Category:** Tutorials & Methods\
**Tags:** freebies, tips-tricks, design\
**Created:** [October 2, 2021, 1:21pm UTC](https://onehack.st/t/the-coolest-new-css-animation-library-for-web-developers/203051 "2021-10-02T13:21:33Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![TheStrength](https://onehack.st/user_avatar/onehack.st/thestrength/32/46753_2.png) [@TheStrength](https://onehack.st/u/TheStrength)\
**Post date:** [October 2, 2021, 1:21pm UTC](https://onehack.st/t/the-coolest-new-css-animation-library-for-web-developers/203051/1 "2021-10-02T13:21:33Z")

</div>

It seems like every day there’s a new animation library and new tools for developers.

With CSS3’s popularity I can totally understand why devs are building so many resources. One new library in particular stood out to me recently: [Vivify](http://vivify.mkcreative.cz/).

This is a free animation library built on CSS and it works kinda like Animate.css. However it offers **totally unique animations** that you just won’t find anywhere else.

 ![image](https://onehack.st/uploads/default/original/3X/4/c/4ce2b5ce0145a34fddb047b7c89790ef829d392e.png)

Could you build these animations yourself from scratch? Certainly.

But it’ll take a lot of work and it’s not the simplest process. I recommend working with something like Vivify because it saves time rather than reinventing the wheel.

You can see all their pre-built animation styles right on [the homepage](http://vivify.mkcreative.cz/).

There you’ll also find a link to the [GitHub repo](https://github.com/Martz90/vivify) where you can pull a copy of the latest script. Right now all you need is the Vivify CSS file in your page header and it should work like a charm.

With Vivify you can also set custom **delays** to your animations. This way you can define when they should run and when the visitor sees them.

Or you could use JavaScript to dynamically add these classes onto your page elements once they come into view. Tons of options, lots of features, and plenty of room for customization.

 ![image](https://onehack.st/uploads/default/original/3X/9/3/93ca37d014953251a937d9bcab4e8a9867f7820b.png)

To get started just visit the [main GitHub](https://github.com/Martz90/vivify) and download the source code.

From there you can test some of the demo files and even preview some of the samples on the main site. It’ll only take a few lines of code to get this working and I guarantee you’ll love your new animations.

**Happy learning!**

---

<div class="post-metadata">

**Author:** ![CATz](https://onehack.st/user_avatar/onehack.st/catz/32/101389_2.png) [@CATz](https://onehack.st/u/CATz)\
**Post date:** [October 6, 2021, 4:26am UTC](https://onehack.st/t/the-coolest-new-css-animation-library-for-web-developers/203051/2 "2021-10-06T04:26:20Z")

</div>

Thanks for sharing

---

<div class="post-metadata">

**Author:** ![ajithnow](https://onehack.st/user_avatar/onehack.st/ajithnow/32/91105_2.png) [@ajithnow](https://onehack.st/u/ajithnow)\
**Post date:** [October 6, 2021, 11:52am UTC](https://onehack.st/t/the-coolest-new-css-animation-library-for-web-developers/203051/3 "2021-10-06T11:52:56Z")

</div>

This is very cool!

---

<div class="post-metadata">

**Author:** ![Potato](https://onehack.st/user_avatar/onehack.st/potato/32/93731_2.png) [@Potato](https://onehack.st/u/Potato)\
**Post date:** [October 10, 2021, 4:33am UTC](https://onehack.st/t/the-coolest-new-css-animation-library-for-web-developers/203051/4 "2021-10-10T04:33:09Z")

</div>

Thanks for the share brother, anybody knows how to use these, I’m a beginner trying to implement some simple methods to code within SharePoint 2016 and sites such normal google sites?