This package lets you add triggers on your page for the animate.css package
Easy triggers for css animations using JQuery. Set up your css animations without a sweat using data annotation tags on HTML.
Install the package via npm
$ npm install animate-js
Or download and copy the files
If you do not have animations set up, you can install the awesome animate.css package by daneden. Visit the site for more information on installation and usage.
Reference jQuery and your css file (or the Animate.css file) on your project head, then animate-js on your scripts section before the closing tag.
<head>
<script src="js/jquery.min.js"></script>
<link rel="stylesheet" href="lib/animate.css />
...
</head>
<body>
...
<script src="js/animate-js.js"></script>
</body>
Set the necessary data attributes for elements that need animating. Basic usage:
<div data-animation-condition="seen">
<div data-animation="bounce infinite">
<span>BOING</span>
</div>
</div>
##Now what?
Launch your site and make sure conditions are met to see the animation. With the example above, you need to scroll down and make sure at least half the parent element is visible. This should trigger the bounce animation on an infinite loop.
##Bare Minimum At the very least, the parent element should have a 'data-animation-condition' attribute set up, and a
<div data-animation-condition="seen">
<p data-animation="fadeInRightBig">Swooosh</p>
</div>
##Data Attrributes
The following are the supported data annotations you can add to your HTML elements using data-[attribute]. Attributes marked with asterisks are required.
###Parent Element
| Attribute | Default | Description |
| *animation-condition | - | The condition that triggers the animation sequence of nested animatable elements |
###Nested Elements
| Attribute | Default | Description |
| *animation | - | An array of comma separated animations. The animation plays for a specific element in the specified order. |
| animation-timeouts | [0] | An array of comma separated timeouts in milliseconds. |
| animation-infinite | false | Specifies if an element's animation sequence should be on a loop |
##Animation Sequence and Timed Animations The fun part is creating your own animation sequence. An element's animation is played in order, and if timeouts are specified, each animation waits that specified amount of time in milliseconds before playing the next.
...
<div data-animation="fadeInRightBig, fadeOutLeftBig" data-animation-timeouts="100, 400" data-animation-infinite>
<span>TO THE LEFT</span>
</div>
<div data-animation="fadeInLeftBig, fadeOutRightBig" data-animation-timeouts="350, 600" data-animation-infinite>
<span>TO THE RIGHT</span>
</div>
...
You can also set up intervals or delays before each element's animation.
<div data-animation-interval="500" data-animation-condition="seen">
<h2>Animating in Intervals</h2>
<p>These animations play in intervals of half a second. </p>
<p data-animation="fadeInRightBig">fade</p>
<p data-animation="fadeInRightBig">in</p>
<p data-animation="fadeInRightBig">from</p>
<p data-animation="fadeInRightBig">right</p>
</div>
If you have noticed, the next animation starts as soon as the previous item starts playing, or if you haven't set up any delays or intervals, they all play simultaneously. Right now, the next animatable element within a parent element is triggered as soon as the current one starts playing. I will later on add an option for it to play before or after the Nth animation, but for now bear with what is available or you can fork this project.
##Looping Animations (not for parent element) There are two types of infinitely looped animations. The first example is having an animation sequence loop using the data-animation-infinite attribute.
<div data-animation="fadeIn, pulse, fadeOut" data-animation-infinite>
<span><3</span>
</div>
In the above example, you should be able to see the heart appear slowly, pulse, then fade away repeatedly.
The other option is to setup the CSS animation to loop.
<div data-animation="fadeIn, shake infinite, fadeOut">
<span>BACON!</span>
</div>
Notice that BACON shakes infinitely and doesn't fade out. This is because Animate-JS waits for the previous animation to end before attempting to play the next listed animation.
##Upcoming Features:
##I was told there would be more functionality DON'T PANIC! I'm working on it! In the mean time, why not leave a comment or suggestion? I always appreciate constructive criticisms.
FAQs
This package lets you add triggers on your page for the animate.css package
We found that animate-js demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.