├── .gitignore
├── .github
    └── workflows
    │   └── npm-publish.yml
├── scripts
    └── build.js
├── LICENSE
├── package.json
├── docs
    ├── index.html
    ├── using-tailwindcss.html
    ├── using-css-transitions.html
    └── using-css-animations.html
├── src
    └── index.js
├── .eslintrc.js
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | dist
2 | node_modules
3 | package-lock.json
4 | yarn.lock
5 | .DS_*
6 | .env
7 | 


--------------------------------------------------------------------------------
/.github/workflows/npm-publish.yml:
--------------------------------------------------------------------------------
 1 | name: NPM Publish
 2 | 
 3 | on:
 4 |   release:
 5 |     types: [created]
 6 | 
 7 | jobs:
 8 |   publish:
 9 |     runs-on: ubuntu-latest
10 |     steps:
11 |       - uses: actions/checkout@v3
12 |       - uses: actions/setup-node@v3
13 |         with:
14 |           node-version: '20.x'
15 |           registry-url: 'https://registry.npmjs.org'
16 |       - run: npm install
17 |       - run: npm run build
18 |       - run: npm version --no-git-tag-version ${{ github.event.release.tag_name }}
19 |       - run: npm publish
20 |         env:
21 |           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
22 | 


--------------------------------------------------------------------------------
/scripts/build.js:
--------------------------------------------------------------------------------
 1 | const fs = require('fs')
 2 | const esbuild = require('esbuild')
 3 | 
 4 | if (! fs.existsSync('./dist')) {
 5 |     fs.mkdirSync('./dist')
 6 | }
 7 | 
 8 | build({
 9 |     entryPoints: ['builds/cdn.js'],
10 |     outfile: 'dist/cdn.min.js',
11 |     platform: 'browser',
12 |     define: { CDN: 'true' },
13 | })
14 | 
15 | build({
16 |     entryPoints: ['builds/module.js'],
17 |     outfile: 'dist/module.esm.js',
18 |     platform: 'neutral',
19 |     mainFields: ['main', 'module'],
20 | })
21 | 
22 | build({
23 |     entryPoints: ['builds/module.js'],
24 |     outfile: 'dist/module.cjs.js',
25 |     target: ['node10.4'],
26 |     platform: 'node',
27 | })
28 | 
29 | function build(options) {
30 |     options.define || (options.define = {})
31 | 
32 |     return esbuild.build({
33 |         ...options,
34 |         minify: true,
35 |         bundle: true,
36 |     })
37 |       .catch(() => process.exit(1))
38 | }
39 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Lars Heidkämper
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "alpinejs-intersect-class",
 3 |     "description": "An Alpine.js plugin to easily add CSS classes to an element when it enters the viewport.",
 4 |     "author": "Lars Heidkämper",
 5 |     "license": "MIT",
 6 |     "repository": {
 7 |         "type": "git",
 8 |         "url": "git+https://github.com/heidkaemper/alpinejs-intersect-class.git"
 9 |     },
10 |     "homepage": "https://github.com/heidkaemper/alpinejs-intersect-class",
11 |     "keywords": [
12 |         "alpinejs",
13 |         "alpine",
14 |         "plugin",
15 |         "intersect",
16 |         "intersection",
17 |         "animate",
18 |         "animation"
19 |     ],
20 |     "main": "dist/module.cjs.js",
21 |     "module": "dist/module.esm.js",
22 |     "unpkg": "dist/cdn.min.js",
23 |     "files": [
24 |         "/dist"
25 |     ],
26 |     "scripts": {
27 |         "build": "node ./scripts/build.js",
28 |         "lint": "npx eslint {builds,scripts,src}/**/*.js",
29 |         "lint:fix": "npx eslint {builds,scripts,src}/**/*.js --fix"
30 |     },
31 |     "devDependencies": {
32 |         "esbuild": "^0.20.2",
33 |         "eslint": "^8.57.0"
34 |     }
35 | }
36 | 


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Alpine.js Intersect-Class - Examples</title>
 9 |     <style>
10 |         body {
11 |             background: white;
12 |             color: black;
13 |             font: normal 1rem/1.5 sans-serif;
14 |             padding: 1rem;
15 |             margin: 0;
16 |         }
17 |         h3 {
18 |             margin: 3rem 0 0;
19 |         }
20 |         a {
21 |             color: black;
22 |         }
23 |     </style>
24 | </head>
25 | 
26 | <body>
27 |     <h1>Alpine.js Intersect-Class</h1>
28 | 
29 |     <h3>Looking for Docs?</h3>
30 |     <p>The <a href="https://github.com/heidkaemper/alpinejs-intersect-class#readme">README</a> is there for you!</p>
31 | 
32 |     <h3>Examples</h3>
33 |     <ul>
34 |         <li><a href="using-tailwindcss.html">Use with Tailwind CSS</a></li>
35 |         <li><a href="using-css-animations.html">Use with CSS Animations</a></li>
36 |         <li><a href="using-css-transitions.html">Use with CSS Transitions</a></li>
37 |     </ul>
38 | </body>
39 | 
40 | </html>
41 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | export default function (Alpine) {
 2 |     Alpine.directive('intersect-class', (el, { expression, modifiers }, { cleanup }) => {
 3 |         const classes = expression.split(' ').filter(Boolean)
 4 | 
 5 |         const observer = new IntersectionObserver(entries => {
 6 |             entries.forEach(entry => {
 7 |                 if (! entry.isIntersecting) {
 8 |                     el.classList.remove(...classes)
 9 | 
10 |                     return
11 |                 }
12 | 
13 |                 el.classList.add(...classes)
14 | 
15 |                 modifiers.includes('once') && observer.disconnect()
16 |             })
17 |         }, { threshold: getThreshold(modifiers) })
18 | 
19 |         observer.observe(el)
20 | 
21 |         cleanup(() => {
22 |             observer.disconnect()
23 |         })
24 |     })
25 | }
26 | 
27 | function getThreshold(modifiers) {
28 |     if (modifiers.includes('full')) {
29 |         return 0.99
30 |     }
31 | 
32 |     if (modifiers.includes('half')) {
33 |         return 0.5
34 |     }
35 | 
36 |     if (! modifiers.includes('threshold')) {
37 |         return 0
38 |     }
39 | 
40 |     const threshold = modifiers[modifiers.indexOf('threshold') + 1]
41 | 
42 |     return threshold === '1' ? 1 : Number(`.${threshold}`)
43 | }
44 | 


--------------------------------------------------------------------------------
/docs/using-tailwindcss.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" class="h-full">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Alpine.js Intersect-Class - Tailwind CSS</title>
 8 |     <script src="https://cdn.tailwindcss.com"></script>
 9 | </head>
10 | 
11 | <body class="h-full bg-white p-4 overflow-x-hidden">
12 |     <h1 class="font-bold text-3xl my-8">Demo - Tailwind CSS</h1>
13 | 
14 |     <p class="mb-12">
15 |         This demo shows the Intersect-Class plugin in combination with <a href="https://tailwindcss.com/" class="underline">Tailwind CSS</a>.<br>
16 |         Demos for vanilla <a href="using-css-transitions.html" class="underline">CSS Transitions</a> and <a href="using-css-animations.html" class="underline">CSS Animations</a> are also available.
17 |     </p>
18 | 
19 |     <div x-data x-intersect-class="opacity-100" class="h-3/4 bg-slate-300 p-4 mb-8 transition duration-1000 opacity-0">
20 |         #1: Fade in
21 |     </div>
22 | 
23 |     <div x-data x-intersect-class="opacity-100 translate-x-0" class="h-3/4 bg-slate-300 p-4 mb-8 transition duration-1000 opacity-0 translate-x-1/2">
24 |         #2: Fade in from right
25 |     </div>
26 | 
27 |     <div x-data x-intersect-class="opacity-100 translate-x-0" class="h-3/4 bg-slate-300 p-4 mb-8 transition duration-1000 opacity-0 -translate-x-1/2">
28 |         #3: Fade in from left
29 |     </div>
30 | 
31 |     <div x-data x-intersect-class.once="opacity-100" class="h-3/4 bg-slate-300 p-4 mb-8 transition duration-1000 opacity-0">
32 |         #4: Fade in just once (no fade out)
33 |     </div>
34 | 
35 |     <div x-data x-intersect-class.threshold.90="opacity-100" class="h-3/4 bg-slate-300 p-4 mb-8 transition duration-1000 opacity-0">
36 |         #5: Fade in when almost fully in viewport (threshold = 90)
37 |     </div>
38 | 
39 |     <script defer src="https://unpkg.com/alpinejs-intersect-class@1.x.x/dist/cdn.min.js"></script>
40 |     <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
41 | </body>
42 | 
43 | </html>
44 | 


--------------------------------------------------------------------------------
/docs/using-css-transitions.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Alpine.js Intersect-Class - CSS Transitions</title>
 8 |     <style>
 9 |         body {
10 |             background: white;
11 |             font: normal 1rem/1.5 sans-serif;
12 |             padding: 1rem;
13 |             margin: 0;
14 |             overflow-x: hidden;
15 |         }
16 | 
17 |         p {
18 |             margin: 0 0 3rem;
19 |         }
20 | 
21 |         div {
22 |             height: 75vh;
23 |             background: #ccc;
24 |             padding: 1rem;
25 |             margin-bottom: 2rem;
26 |         }
27 | 
28 |         .fade-in {
29 |             opacity: 0;
30 |             transition: all 1s;
31 |         }
32 | 
33 |         .fade-from-right {
34 |             opacity: 0;
35 |             transform: translateX(50%);
36 |             transition: all 1s;
37 |         }
38 | 
39 |         .fade-from-left {
40 |             opacity: 0;
41 |             transform: translateX(-50%);
42 |             transition: all 1s;
43 |         }
44 | 
45 |         .is-visible {
46 |             opacity: 1;
47 |             transform: translateX(0);
48 |         }
49 |     </style>
50 | </head>
51 | 
52 | <body>
53 |     <h1>Demo - CSS Transitions</h1>
54 | 
55 |     <p>
56 |         This demo shows the Intersect-Class plugin in combination with CSS Transitions.<br>
57 |         Demos for <a href="using-css-animations.html">CSS Animations</a> and <a href="using-tailwindcss.html">Tailwind CSS</a> are also available.
58 |     </p>
59 | 
60 |     <div x-data x-intersect-class="is-visible" class="fade-in">
61 |         #1: Fade in
62 |     </div>
63 | 
64 |     <div x-data x-intersect-class="is-visible" class="fade-from-right">
65 |         #2: Fade in from right
66 |     </div>
67 | 
68 |     <div x-data x-intersect-class="is-visible" class="fade-from-left">
69 |         #3: Fade in from left
70 |     </div>
71 | 
72 |     <div x-data x-intersect-class.once="is-visible" class="fade-in">
73 |         #4: Fade in just once (no fade out)
74 |     </div>
75 | 
76 |     <script defer src="https://unpkg.com/alpinejs-intersect-class@1.x.x/dist/cdn.min.js"></script>
77 |     <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
78 | </body>
79 | 
80 | </html>
81 | 


--------------------------------------------------------------------------------
/docs/using-css-animations.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Alpine.js Intersect-Class - CSS Animations</title>
 8 |     <style>
 9 |         body {
10 |             background: white;
11 |             font: normal 1rem/1.5 sans-serif;
12 |             padding: 1rem;
13 |             margin: 0;
14 |             overflow-x: hidden;
15 |         }
16 | 
17 |         p {
18 |             margin: 0 0 3rem;
19 |         }
20 | 
21 |         div {
22 |             height: 75vh;
23 |             background: #ccc;
24 |             padding: 1rem;
25 |             margin-bottom: 2rem;
26 |         }
27 | 
28 |         @keyframes fade-in {
29 |             0% {
30 |                 opacity: 0;
31 |             }
32 |             100% {
33 |                 opacity: 1;
34 |             }
35 |         }
36 |         .fade-in {
37 |             animation: fade-in 1s ease-out both;
38 |         }
39 | 
40 |         @keyframes fade-from-right {
41 |             0% {
42 |                 opacity: 0;
43 |                 transform: translateX(50%);
44 |             }
45 |             100% {
46 |                 opacity: 1;
47 |                 transform: translateX(0);
48 |             }
49 |         }
50 |         .fade-from-right {
51 |             animation: fade-from-right 1s ease-out both;
52 |         }
53 | 
54 |         @keyframes fade-from-left {
55 |             0% {
56 |                 opacity: 0;
57 |                 transform: translateX(-50%);
58 |             }
59 |             100% {
60 |                 opacity: 1;
61 |                 transform: translateX(0);
62 |             }
63 |         }
64 |         .fade-from-left {
65 |             animation: fade-from-left 1s ease-out both;
66 |         }
67 |     </style>
68 | </head>
69 | 
70 | <body>
71 |     <h1>Demo - CSS Animations</h1>
72 | 
73 |     <p>
74 |         This demo shows the Intersect-Class plugin in combination with CSS Animations.<br>
75 |         Demos for <a href="using-css-transitions.html">CSS Transitions</a> and <a href="using-tailwindcss.html">Tailwind CSS</a> are also available.
76 |     </p>
77 | 
78 |     <div x-data x-intersect-class="fade-in" class="fade-in">
79 |         #1: Fade in
80 |     </div>
81 | 
82 |     <div x-data x-intersect-class="fade-from-right" class="fade-from-right">
83 |         #2: Fade in from right
84 |     </div>
85 | 
86 |     <div x-data x-intersect-class="fade-from-left" class="fade-from-left">
87 |         #3: Fade in from left
88 |     </div>
89 | 
90 |     <div x-data x-intersect-class.once="fade-in" class="fade-in">
91 |         #4: Fade in just once (no fade out)
92 |     </div>
93 | 
94 |     <script defer src="https://unpkg.com/alpinejs-intersect-class@1.x.x/dist/cdn.min.js"></script>
95 |     <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
96 | </body>
97 | 
98 | </html>
99 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
  1 | module.exports = {
  2 |     "env": {
  3 |         "node": true,
  4 |         "browser": true,
  5 |         "es6": true,
  6 |     },
  7 |     "extends": "eslint:recommended",
  8 |     "parserOptions": {
  9 |         "ecmaVersion": 9,
 10 |         "sourceType": "module",
 11 |         "allowImportExportEverywhere": true
 12 |     },
 13 |     "rules": {
 14 |         "linebreak-style": [
 15 |             "error",
 16 |             "unix"
 17 |         ],
 18 |         "quotes": [
 19 |             "error",
 20 |             "single"
 21 |         ],
 22 |         "semi": [
 23 |             "error",
 24 |             "never"
 25 |         ],
 26 |         "space-in-parens": [
 27 |             "error",
 28 |             "never"
 29 |         ],
 30 |         "no-template-curly-in-string": [
 31 |             "error"
 32 |         ],
 33 |         "block-scoped-var": [
 34 |             "error"
 35 |         ],
 36 |         "no-empty-function": [
 37 |             "error"
 38 |         ],
 39 |         "brace-style": [
 40 |             "error",
 41 |             "1tbs"
 42 |         ],
 43 |         "camelcase": [
 44 |             "error"
 45 |         ],
 46 |         "comma-spacing": [
 47 |             "error",
 48 |             {
 49 |                 "before": false,
 50 |                 "after": true
 51 |             }
 52 |         ],
 53 |         "comma-style": [
 54 |             "error",
 55 |             "last"
 56 |         ],
 57 |         "computed-property-spacing": [
 58 |             "error",
 59 |             "never"
 60 |         ],
 61 |         "eol-last": [
 62 |             "error",
 63 |             "always"
 64 |         ],
 65 |         "func-call-spacing": [
 66 |             "error",
 67 |             "never"
 68 |         ],
 69 |         "key-spacing": [
 70 |             "error",
 71 |             {
 72 |                 "mode": "minimum",
 73 |                 "beforeColon": false,
 74 |                 "afterColon": true
 75 |             }
 76 |         ],
 77 |         "keyword-spacing": [
 78 |             "error",
 79 |             {
 80 |                 "before": true,
 81 |                 "after": true
 82 |             }
 83 |         ],
 84 |         "lines-between-class-members": [
 85 |             "error",
 86 |             "always"
 87 |         ],
 88 |         "no-array-constructor": [
 89 |             "error"
 90 |         ],
 91 |         "no-console": [
 92 |             "warn"
 93 |         ],
 94 |         "no-multiple-empty-lines": [
 95 |             "error",
 96 |             {
 97 |                 "max": 2
 98 |             }
 99 |         ],
100 |         "no-trailing-spaces": [
101 |             "error"
102 |         ],
103 |         "no-unused-vars": [
104 |             "error",
105 |             {
106 |                 "ignoreRestSiblings": true
107 |             }
108 |         ],
109 |         "one-var": [
110 |             "error",
111 |             "never"
112 |         ],
113 |         "padded-blocks": [
114 |             "error",
115 |             "never"
116 |         ],
117 |         "padding-line-between-statements": [
118 |             "error",
119 |             {
120 |                 "blankLine": "always",
121 |                 "prev": "*",
122 |                 "next": "return"
123 |             }
124 |         ],
125 |         "prefer-object-spread": [
126 |             "error"
127 |         ],
128 |         "no-fallthrough": "off",
129 |         "no-var": [
130 |             "error"
131 |         ],
132 |         "object-shorthand": [
133 |             "error"
134 |         ],
135 |         "prefer-destructuring": [
136 |             "error"
137 |         ],
138 |         "prefer-rest-params": [
139 |             "error"
140 |         ],
141 |         "prefer-spread": [
142 |             "error"
143 |         ]
144 |     }
145 | };
146 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Alpine.js Intersect-Class Plugin
  2 | 
  3 | An Alpine.js plugin to easily set CSS classes to an element when it enters the viewport.<br>
  4 | Especially useful for animating elements when scrolling.
  5 | 
  6 | ```html
  7 | <!-- A little something like this.. -->
  8 | <div x-data x-intersect-class="is-visible"></div>
  9 | ```
 10 | 
 11 | ### Demo
 12 | [Click here to take a look at the examples](https://heidkaemper.github.io/alpinejs-intersect-class/using-tailwindcss.html)
 13 | ([View Source](https://github.com/heidkaemper/alpinejs-intersect-class/tree/main/docs))
 14 | 
 15 | ---
 16 | 
 17 | ## Installation
 18 | You can use this plugin by either including it from a `<script>` tag or installing it via NPM:
 19 | 
 20 | ### Via CDN
 21 | You can include the CDN build of this plugin as a `<script>` tag, just make sure to include it BEFORE Alpine's core JS file.
 22 | 
 23 | ```html
 24 | <!-- This Plugin -->
 25 | <script defer src="https://unpkg.com/alpinejs-intersect-class@1.x.x/dist/cdn.min.js"></script>
 26 | 
 27 | <!-- Alpine Core -->
 28 | <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
 29 | ```
 30 | 
 31 | ### Via NPM
 32 | You can install Intersect from NPM for use inside your bundle like so:
 33 | 
 34 | ```sh
 35 | npm install alpinejs-intersect-class
 36 | ```
 37 | 
 38 | Then initialize it from your bundle:
 39 | 
 40 | ```js
 41 | import Alpine from 'alpinejs'
 42 | import intersectClass from 'alpinejs-intersect-class'
 43 | 
 44 | Alpine.plugin(intersectClass)
 45 | 
 46 | ...
 47 | ```
 48 | 
 49 | ## Usage
 50 | Use the `x-intersect-class` Attribute to set the CSS class that should be added to the element once it comes to the browsers viewport.
 51 | 
 52 | ```html
 53 | <div x-data x-intersect-class="fade-in"></div>
 54 | ```
 55 | Make sure that you have defined that class in your CSS files, like `fade-in` in this example.
 56 | 
 57 | ### The .once Modifier
 58 | 
 59 | You can use the `.once` modifier if you want to trigger the CSS class only on the first appearance of an element.
 60 | 
 61 | ```html
 62 | <div x-data x-intersect-class.once="fade-in"></div>
 63 | ```
 64 | 
 65 | ### .threshold, .half and .full Modifier
 66 | 
 67 | Control the `threshold` property of the IntersectionObserver. This works the same way like it does with Alpines **[Intersect Plugin](https://alpinejs.dev/plugins/intersect#half)**.
 68 | 
 69 | ```html
 70 | <div x-data x-intersect-class.threshold.75="fade-in"></div>
 71 | ```
 72 | 
 73 | ## FAQ
 74 | 
 75 | ### Couldn't I just use Alpines Intersect Plugin to do something like this?
 76 | 
 77 | ```html
 78 | <div x-data="{ shown: false }" x-intersect="shown = true" :class="{ 'is-visible': shown }">
 79 | ```
 80 | You definitely could. And if you are using the Intersect plugin already, then you probably should!<br>
 81 | The point of the Intersect-Class plugin is to provide this functionality with as few attributes as possible so that frontend developers will actually use it.
 82 | 
 83 | ### Do I need the x-data attribute?
 84 | 
 85 | Yes, you do. With x-data you define a Alpine.js Component.<br>
 86 | [Click here](https://alpinejs.dev/directives/data) to read more about x-data in the Alpine.js documentation.
 87 | 
 88 | ### My elements are flashing when the page is loading
 89 | 
 90 | This is a known problem with JavaScript animations. It's because the JS takes a moment to initialize. The solution can be different depending on what kind of animation you want to run.
 91 | 
 92 | A good starting point could be the use of [x-cloak](https://alpinejs.dev/directives/cloak).
 93 | Initial use of the CSS class can also be helpful, like I did for the [CSS animations demo](https://heidkaemper.github.io/alpinejs-intersect-class/using-css-animations.html).
 94 | 
 95 | ---
 96 | 
 97 | <p>
 98 | <a href="https://www.npmjs.com/package/alpinejs-intersect-class"><img src="https://img.shields.io/npm/v/alpinejs-intersect-class?label=version" alt="Version"></a>
 99 | <a href="https://www.npmjs.com/package/alpinejs-intersect-class"><img src="https://img.shields.io/bundlephobia/minzip/alpinejs-intersect-class?label=size" alt="Bundle size"></a>
100 | <a href="https://www.npmjs.com/package/alpinejs-intersect-class"><img src="https://img.shields.io/npm/dt/alpinejs-intersect-class" alt="Downloads"></a>
101 | <a href="https://www.npmjs.com/package/alpinejs-intersect-class"><img src="https://img.shields.io/github/license/heidkaemper/alpinejs-intersect-class" alt="License"></a>
102 | </p>
103 | 


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