Animate Elements On Scroll & Mouse Hover - jQuery dom-animation

Dom-animation is a jQuery-powered animation library that allows you to animate elements when they become visible in the viewport or when the mouse hovers over them. 

It supports various animations, including fade, slide, expand, and shrink. You can also customize the speed and directions to suit your actual needs. Great for creating engaging scroll- and mouse-triggered DOM animations that make your website or landing page more visually appealing.

How to use it:

1. To get started, import the main script as a module (jQuery is included).

<script type="module" src="./index.js"></script>

2. Add the class="animated" to the target element.

<div class="animated">
  Element To Animate
</div>

3. Apply an animation of your choice to the element. All possible animations & directions.

• fade: fade in
• transform: slide
• height expand: expand the element's height
• height shrink: shrink the element's height
• up: down to up
• down: up to down
• left: right to left
• right: left to right

<div 
  class="animated"
  data-animated="fade,transform up">
  Element To Animate
</div>

4. Specify the trigger event. Can be either "on screen" or "on mouse over".

<div 
  class="animated"
  data-animated="fade,transform up"
  data-trigger="on screen">
  Element To Animate
</div>

<div 
  class="animated"
  data-animated="height shrink"
  data-trigger="on mouse over"
  data-target="#example">
  Shrink Element #example On Mouse Over
</div>

<div id="example">
  ...
</div>

5. Config the animation speed.

<div 
  class="animated"
  data-animated="fade,transform up"
  data-trigger="on screen"
  data-transition="600">
  Element To Animate
</div>

---

This awesome jQuery plugin is developed by NicolasSaikali. For more Advanced Usages, please check the demo page or visit the official website.