Animate.css-Dynamic is an attempt to make Animate.css dynamic in nature, in the sense, having control on animations, the basic idea is to animate the element when we want, and how we want, without need of changing anything in the source library {animate.css}.
The animation occurs/happens when the element is visible, the element is placed on scrollable window/document. The elements contain class ani_{animation_name}, read more here.
Instructions:-
Scroll on elements to see animations, scroll slowly for better observations.
Attention seekers
bounce
flash
rubberBand
Back entrances
backInDown
backInLeft
backInRight
Bouncing entrances
bounceIn
bounceInDown
bounceInLeft
Fading entrances
fadeIn
fadeInDown
fadeInLeft
Flippers
flip
flipInX
flipInY
Lightspeed
lightSpeedInRight
lightSpeedInLeft
Rotating entrances
rotateIn
rotateInDownLeft
rotateInDownRight
Zooming entrances
zoomIn
zoomInDown
zoomInLeft
Sliding entrances
slideInDown
slideInLeft
slideInRight
On Scroll of a Division
Description:-
The animation occurs/happens when the element is visible, the element is placed inside a scrollable division.
The scrollable division contains class
aniUtil_scrollDiv and elements contain class aniIn_{animation_name} read more here .
Instructions:-
Scroll division to see animations, scroll slowly for better observations.
Attention seekers
bounce
flash
Back entrances
backInDown
backInLeft
backInRight
Bouncing entrances
bounceIn
bounceInDown
bounceInLeft
Fading entrances
fadeIn
fadeInDown
fadeInLeft
Flippers
flip
flipInX
flipInY
Lightspeed
lightSpeedInRight
lightSpeedInLeft
Rotating entrances
rotateIn
rotateInDownLeft
rotateInDownRight
Specials
jackInTheBox
rollIn
Zooming entrances
zoomIn
zoomInDown
Sliding entrances
slideInDown
slideInLeft
Dramatic and Ordinary animations
Description:-
Dramatic animations refers to the elements entering into view with animations dramatically,
when scolled into view.
The element contains animation class with class aniUtil_dramatic to make it Dramatic, read more here.
Instructions:-
Scroll on elements to see difference, scroll slowly for better observations.
Ordinary
Dramatic
Active and Ordinary animations
Description:-
By Ordinary I meant, those animations which happens only once when scrolled into view,
while Active animations happens whenever element is scrolled into view.
The element contains animation class with class aniUtil_active for Active animations
and adding aniUtil_dramatic makes it Active and Dramatic, read more here.
Instructions:-
Scroll on/off elements to see difference, scroll multiple times for better observations.
Ordinary
Active
Active and Dramatic
Click animations
Description:-
Animate on click , the element contains animation class with class aniUtil_onclick for click animations and adding aniUtil_active makes it Click and Active, read more here.
Instructions:-
Click on element to see animation, click multiple times for active animations.
Ordinary
Click
Click and Active
MouseOver animations
Description:-
Animate on mouse over, the element contains animation class with class aniUtil_onMouse for MouseOver animations and adding aniUtil_active makes it MouseOver and Active, read more here.
Instructions:-
mouse over element to see animation, mouse over/off for active animations.
Ordinary
MouseOver
MouseOver and Active
Key press animations
Description:-
Animate on key press, the element contains animation class with class aniUtil_onKey-{key code} for KeyPress animations and adding aniUtil_active makes it KeyPress and Active, read more here.
Instructions:-
press the desired key to see animation, press multiple times for active animations.
↑
←
↓
→
Documentation
Installation and Usage
Installation
1. First Install animate.css library, read this.
2. Done with animate.css installation...? add Jquery to your website, 3.0 - latest, like an example below.
@main for latest version, @{version number} for specific version. Note:- changes (release) on@main is not immediately available in cdn, better use @{version number}.
Basic Usage
After installing Animate.css-Dynamic, add the class ani_{animation name} where: {animation name} is a valid animation name from animate.css library, as in here.
<h1 class = "ani_bounce"> An animated element. </h1>
Advanced Usage
You can utilize the classes and functions from this library for advanced usage, I have listed few here.
Get animation classes
You can use function get_aniClasses(regex/object/selector element) to get the animate.css animation classes. Ex:-
Suppose if you have element <span class="ani_fadeIn"></span> you get animate__animated animate__fadeIn.
What can I do with this.? you got the classes, I just showed you what you can do, what you wanna do is your choice.
Get to know when element gets into view
You can get the visibility of element on document view, using isScrolledIntoView(object element) to know the visibility of element.
returns true if element if fully visible on screen, flase otherwise.
Ex:-
var element =$(".semeElement");//You can use javascript as well.if(isScrolledIntoView(element) === true){
console.log("Yep fully visible");
}
Yaah I know it's usefull, thank me later.
Make use of Utility functions and "animationend" event listener in pro way
Use utility functions such as aniUtil_animate() in proficient way, make use of animationend event listener for your own customizations, nest event handlers for mutliple/chain animations.
Some examples include custom animations tubeLight, OutIn, and yaah this one.
Supports for dynamically created/loaded elements
If you are creating/loading elements dynamically, and you want to add animations to it? then add animation to the element and re-initialize those elements using view_Animations(), click_Animations(), hover_Animations() functions.
Choose between these functions according to your nead, ie:
if created/loaded elements having ordinary animations, use view_Animations().
if created/loaded elements having click animations, use click_Animations().
if created/loaded elements having mouseover animations, use hover_Animations().
if created/loaded elements having dramatic animations, use aniUtil_dramatic().
if created/loaded elements having text animations, use aniCus_text().
The example of this is, I have used these functions to re-initialize elements for animations when the division is reloaded using refresh icons .
Utility Classes
aniUtil_scrollDivv1.1.3
This utility class is a class for special division, in the sense, the divisions containing elements to be animated when these divisions are scrolled, as in here, without this utility class, the division is just a normal scrollable division, no animation will happen on any of it's elements.
Points to remember:
The division should be a valid scrollable division, with overflow: auto or custom for x and y axes.
Do not forget to include class name aniUtil_scrollDiv
.
Do not nest this division inside multiple divisions, observed lot of times, when nested there are problems triggering onScroll event.
The animation classes for elements inside this division prefixed with aniIn_ and notani_, otherwise the animations on scroll go inappropriate.
<div class = "aniUtil_scrollDiv">
<h1 class = "aniIn_bounce"> An animated inner element </h1><br/>
<h1 class = "aniIn_bounce"> An animated inner element </h1><br/>
<h1 class = "aniIn_bounce"> An animated inner element </h1><br/>
</div>
aniUtil_dramaticv1.1.3
The simple definition of this class would be: It is used to make animations dramatic, as in here.
Proper definition of Dramatic animations:
The Dramatic animations make an element to animate and enter into view dramatically, in the sense, the element will be invisible on the page initially, and when it is fully scrolled into view (window/division or both) surprise...! get in/on/out to view while animating.
<h1 class = "ani_fadeInLeft aniUtil_dramatic">Utility class for dramatic animations</h1>
aniUtil_activev1.1.3
The simple definition of this class would be: It is used to make animations active, as in here.
Proper definition of Active animations:
The Active animations are those animations which gets animated whenever the element gets in/off to view, hence the name. Ther is no limit on how many times the element is animated, it is animated whenever scrolled in/clicked/mouse over/key press.
<h1 class = "ani_fadeInLeft aniUtil_active">Utility class for active animations</h1>
aniUtil_onClickv1.1.3
This utility class is used to animate the element on click, as in here, that's enough description already.
Yes, you are right, I have used aniUtil_onClick on these refresh icons , nice observation dude.
<h1 class = "ani_bounce aniUtil_onClick">Utility class for onClick animations</h1>
aniUtil_onMousev1.1.3
This utility class is used to animate the element on mouseover, as in here, that's enough description already.
Yes, you are right, I have used aniUtil_onMouse for github icon on top left corner , nice observation dude.
<h1 class = "ani_tada aniUtil_onMouse">Utility class for onMouse animations</h1>
aniUtil_onKeyv1.1.3
This utility class is used to animate the element on key press, as in here, the element contain class aniUtil_onKey-{key code}, where: key code is a valid keyCode visit here for reference.
<h1 class = "ani_tada aniUtil_onKey-KeyK">Utility class for onKey animations</h1>
aniUtil_onMouseRepeatv2.16.7
This utility class is used to repeat the animation on an element until mouseout, the element contain class aniUtil_onMouseRepeat.
<h1 class = "ani_headShake aniUtil_onMouse aniUtil_active aniUtil_onMouseRepeat"> aniUtil_onMouseRepeat </h1>
onMouseRepeat
Keep mouse on above element to repeat animation, remove to stop.
Also check out utility classes from animate.css library, here.
Utility Functions
aniUtil_disable() v2.6.1
This utility function is used to disable all/specific animation on page. Syntax:aniUtil_disable(string: which);
where which can be one of below.
which
Description
all
Disables all animations, including custom animations.
custom
Disables all custom animations.
seekers
Disables all attention seekers animations.
back
Disables all back in/Out animations, both entrances and exits.
backIn
Disables all backIn animations, only entrances.
backOut
Disables all backOut animations, only exits.
bounce
Disables all bounce in/Out animations, both entrances and exits
bounceIn
Disables all bounceIn animations, only entrances.
bounceOut
Disables all bounceOut animations, only exits.
fade
Disables all fade in/Out animations, both entrances and exits
fadeIn
Disables all fadeIn animations, only entrances.
fadeOut
Disables all fadeOut animations, only exits.
flip
Disables all flippers in/Out animations, both entrances and exits
lightSpeed
Disables all lightSpeed in/Out animations, both entrances and exits
rotate
Disables all rotate in/Out animations, both entrances and exits
rotateIn
Disables all rotateIn animations, only entrances.
rotateOut
Disables all rotateOut animations, only exits.
specials
Disables all specials animations.
zoom
Disables all zoom in/Out animations, both entrances and exits
zoomIn
Disables all zoomIn animations, only entrances.
zoomOut
Disables all zoomOut animations, only exits.
slide
Disables all slide in/Out animations, both entrances and exits
slideIn
Disables all slideIn animations, only entrances.
slideOut
Disables all slideOut animations, only exits.
Hey hold up not only these, you can also specify a particular animation to disable, like fadeInLeft, bounceInLeft, fadeInBottomRight, yes you can.
Over all you can disable all/custom/category/particular animation, depends on what you want.
See More
Click on buttons to disable animations.
Reload to enable them back or click on enable buttons in below section.
aniUtil_enable() v2.6.1
This utility function is used to enable all/specific animation on page. Syntax:aniUtil_enable(string: which);
where which is as same as in aniUtil_disable().
Click on buttons to enable animations.
aniUtil_animate() v2.6.1
This utility function is used to add animation to a specific element. Syntax:aniUtil_animate(object/selector/regex element, string: animation_class/es);
where element can be
an object(DOM element object) {eg:- this, document.getElementByID('mydiv')}.
a selector (typical selector just ilke in css {eg:- .someClass, #someID, etc.}).
a regex (regular expression) {eg:- class^='prefix'}.
animation class/es is any animation class with prefix ani_, not only this you can also give utility classes with this {eg:- ani_flipIn ani_onClick aniUtil_active}.
You won't stop there, you can also give some custom classes as well, why not. #animateElem
Not animating?, click on button to enable animation on specific element.
aniUtil_inanimate() v2.6.1
This utility function is used to disable animation on a specific element. Syntax:aniUtil_inanimate(object/selector/regex element);
where element is as same as in aniUtil_animate(). #inanimateElem
Click on button to disable animation on specific element.
aniUtil_reset() v2.16.7
This utility function is used to reset animation on a specific element. Syntax:aniUtil_reset(object/selector/regex element);
where element is as same as in aniUtil_animate().
#resetElem
The above element is already animated and it's not having aniUtil_active now you can just reset it so that it can be re-animated.
Yes I have used this function for highlighting the heading after clicking slidebar item.
aniUtil_flush() v2.18.8
This utility function is used to flush animation classes from a specific element. Syntax:aniUtil_flush(object/selector/regex element);
where element is as same as in aniUtil_animate().
#flushElem
The above element is already animated, now you can just flush animation classes to make it a fresh element.
You can see the classList of #flushElem
Custom Animations
aniCus_clickDisabled v1.1.3
This animation is combination of ani_shakeX aniUtil_onClick aniUtil_active animate__faster, and a custom border during animation. Hint:- Use this animation when you don't want user to click button unless some condition, and add aniUtil_disabled once condition is true.
aniCus_tubeLight v1.1.3
This animation is made with series of animations to form a single one. Note:- aniUtil_active is not recommended, as it will be expensive with respect to performance.
Ordinary/When scrolled
tubeLight
onClick
tubeLight
onMouse
tubeLight
onKey: press 'K' to see animation v2.6.1
tubeLight
aniCus_OutIn v2.6.1
This animation first goes exit animation then comes back with entrance animation, that's enough as explaination. Syntax:- aniCus_OutIn-{exit animation}-{entrance animation} Example:- aniCus_OutIn-bounceOutLeft-bounceInRight
well you can also give entrance animation first then exit animation, not only that, you can give any 2 animations, use it as you wish.
Ordinary
Click
MouseOver
press key 'S'
Key
See More
aniCus_text v2.13.5
A special kind of animation, which is applied on some text. Syntax:- aniCus_text-{animation_name} Points to note:-
You cannot apply this animation on non text elements. (simply useless)
The default delay for each letter is 0.1s varying (for ordinary animations only).
You can add utility classes as well, excluding aniUtil_onKey.
Examples:-
<h1 class = "aniCus_text-fadeInLeft aniUtil_active">aniCus_text animation</h1>
Ordinary
Animate.css-Dynamic
Click (usefull? You should know)
Animate.css-Dynamic
MouseOver
Animate.css-Dynamic
Seems interesting...?, more coming soon.
More Examples
Cat peek up.
This is just a beginning, you can do lot more, just explore...!
Best parctices are included in animate.css library, as in here, there is enough explaination there, read it.
Do not use animations for large items especially if used in a grid system {eg: bootstrap grids}, it is observed to be inappropriate in mobile browsers, as in here.
The animations like (aniCus_tubeLight, aniCus_OutIn) can get interrupted while in animation, well only when scrolled off and on.
The overflow issue from animate.css library is now pretty much open especially when aniUtil_active is used and the solution is same as in here.
Contribution
You can contribute to Animate.css-dynamic by,
Creating issue: - Create issue about difficulties/bugs or if you some idea/s for custom animations.
Creating pull request: - Well creating pull request is not straight forward here, you need to understand the working of library, if you have any suggestions or you have any ideas like new custom animations just go for it.
Submitting your animations: - You will find these animations in examples, note that the animation idea should be unique and kinda special.
