├── package.json
├── readme.md
└── src
    └── index.js


/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "alpine-intersect-animate",
 3 |   "version": "1.0.3",
 4 |   "description": "An alpine.js plugin you can use to animate DOM once it enter the viewport",
 5 |   "main": "src/index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "author": "Patompong Savaengsuk",
10 |   "license": "MIT"
11 | }
12 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
 1 | # alpine-intersect-animate
 2 | This is an alpine.js plugin that you can use to animate your DOM once it enters the viewport. 
 3 | 
 4 | The plugin only work with animate.css library (or you can create your own class).
 5 | 
 6 | It allows you to use animate.css class like so (note that we don't need to add the animate_animated class, the plugin will do that for us):
 7 | 
 8 | ```html
 9 | <div x-data x-intersect-animate="fadeInUp">
10 |     I'm gonna be animated once I enter the viewport
11 | </div>
12 | 
13 | <!-- The above code will becomes this once the DOM is in the viewport -->
14 | <div x-data x-intersect-animate="fadeInUp" class="animate_animated animate_fadeInUp">
15 |     I'm gonna be animated once I enter the viewport
16 | </div>
17 | ```
18 | 
19 | ## Installation
20 | 
21 | - Make sure you've included animate.css to your website (https://animate.style/).
22 | - Run `npm install alpine-intersect-animate --save`.
23 | 
24 | ## Usage
25 | 
26 | Import the plugin, you can name it anything (for example IntersectAnimate). Then, set it as an Alpine plugin.
27 | ```js
28 | // Import
29 | import Alpine from 'alpinejs';
30 | import IntersectAnimate from 'alpine-intersect-animate';
31 | 
32 | // Set as alpine.js plugin
33 | Alpine.plugin(IntersectAnimate);
34 | 
35 | // Start alpine.js
36 | Alpine.start();
37 | ```


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | export default function (Alpine) {
 2 |   Alpine.directive('intersect-animate', (el, { value, expression, modifiers }, { evaluateLater, cleanup }) => {
 3 |     let observer = new IntersectionObserver(entries => {
 4 |       entries.forEach(entry => {
 5 |         if (
 6 |           !entry.isIntersecting && value === 'enter' ||
 7 |           entry.isIntersecting && value === 'leave' ||
 8 |           entry.intersectionRatio === 0 && !value
 9 |         ) return;
10 | 
11 |         let classes = ['animate__animated'];
12 |         expression.split(" ").forEach(c => classes.push(`animate__${c}`));
13 |         el.classList.add(...classes);
14 | 
15 |         observer.disconnect();
16 |       })
17 |     })
18 | 
19 |     observer.observe(el);
20 | 
21 |     cleanup(() => {
22 |       observer.disconnect();
23 |     });
24 |   });
25 | }


--------------------------------------------------------------------------------