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.
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 |
98 | 
Alpine.js Intersect-Class
28 | 29 |Looking for Docs?
30 |The README is there for you!
31 | 32 |Examples
33 |-
34 |
- Use with Tailwind CSS 35 |
- Use with CSS Animations 36 |
- Use with CSS Transitions 37 |
Demo - CSS Animations
72 | 73 |
74 | This demo shows the Intersect-Class plugin in combination with CSS Animations.
75 | Demos for CSS Transitions and Tailwind CSS are also available.
76 |
79 | #1: Fade in
80 |
81 |
82 |
83 | #2: Fade in from right
84 |
85 |
86 |
87 | #3: Fade in from left
88 |
89 |
90 |
91 | #4: Fade in just once (no fade out)
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
--------------------------------------------------------------------------------
/docs/using-css-transitions.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Demo - CSS Transitions
54 | 55 |
56 | This demo shows the Intersect-Class plugin in combination with CSS Transitions.
57 | Demos for CSS Animations and Tailwind CSS are also available.
58 |
61 | #1: Fade in
62 |
63 |
64 |
65 | #2: Fade in from right
66 |
67 |
68 |
69 | #3: Fade in from left
70 |
71 |
72 |
73 | #4: Fade in just once (no fade out)
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
--------------------------------------------------------------------------------
/docs/using-tailwindcss.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Demo - Tailwind CSS
13 | 14 |
15 | This demo shows the Intersect-Class plugin in combination with Tailwind CSS.
16 | Demos for vanilla CSS Transitions and CSS Animations are also available.
17 |
20 | #1: Fade in
21 |
22 |
23 |
24 | #2: Fade in from right
25 |
26 |
27 |
28 | #3: Fade in from left
29 |
30 |
31 |
32 | #4: Fade in just once (no fade out)
33 |
34 |
35 |
36 | #5: Fade in when almost fully in viewport (threshold = 90)
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------