📜 ⬆️ ⬇️

AniJS is a library for declarative description of CSS animations.

The other day I was engaged in creating a landing page with a decent set of animation that occurs during interaction with the page. Straight I felt that there must be some kind of cool library for solving the problem. And then I found AniJS , which completely conquered me!



In my opinion this is a great solution to describe the animation in the spirit of:
')
<div data-anijs="if: click, do: flipInY, to: .container-box"></div> 

Everything is as intuitive as possible: when you click on the specified div , we do an animation of flipInY on the .container-box element.

I will also mention the possibility of creating an event queue, for example:

 <div class="element1" data-anijs="if: click, do: wobble, to: .element2"> !</div> <div class="element2">  Wobble!</div> <div class="element3" data-anijs="if: animationend, on: .element2, do: hinge">   </div> 

That is, when you click on .element1 , the wobble effect will be applied to .element2 , after which a dropout effect will be applied to the lower border of the browser window.

In general, a lot of interesting things!
Interested please read .

Source: https://habr.com/ru/post/222325/


All Articles