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 .