Intersect Plugin
Alpine's Intersect plugin is a convenience wrapper for Intersection Observer that allows you to easily react when an element enters the viewport.
This is useful for: lazy loading images and other content, triggering animations, infinite scrolling, logging "views" of content, etc.
Installation
You can use this plugin by either including it from a <script>
tag or installing it via NPM:
Via CDN
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.
<!-- Alpine Plugins --> <!-- Alpine Core -->
Via NPM
You can install Intersect from NPM for use inside your bundle like so:
npm install @alpinejs/intersect
Then initialize it from your bundle:
import Alpine from 'alpinejs'import intersect from '@alpinejs/intersect' Alpine.plugin(intersect) ...
x-intersect
The primary API for using this plugin is x-intersect
. You can add x-intersect
to any element within an Alpine component, and when that component enters the viewport (is scrolled into view), the provided expression will execute.
For example, in the following snippet, shown
will remain false
until the element is scrolled into view. At that point, the expression will execute and shown
will become true
:
<div x-data="{ shown: false }" x-intersect="shown = true"> <div x-show="shown" x-transition> I'm in the viewport! </div></div>
x-intersect:enter
You can opt to only trigger x-intersect when the element ENTERS the viewport by adding the :enter
suffix to x-intersect
like so:
<div x-intersect:enter="shown = true">...</div>
x-intersect:leave
Similarly, you can add :leave
to only trigger x-intersect when the element LEAVES the viewport:
<div x-intersect:leave="shown = true">...</div>
Modifiers
.once
Sometimes it's useful to evaluate an expression only the first time an element enters the viewport and not subsequent times. For example when triggering "enter" animations. In these cases, you can add the .once
modifier to x-intersect
to achieve this.
<div x-intersect.once="shown = true">...</div>
.half
Evaluates the expression once the intersection threshold exceeds 0.5
.
Useful for elements where it's important to show at least part of the element.
<div x-intersect.half="shown = true">...</div> // when `0.5` of the element is in the viewport
.full
Evaluates the expression once the intersection threshold exceeds 0.99
.
Useful for elements where it's important to show the whole element.
<div x-intersect.full="shown = true">...</div> // when `0.99` of the element is in the viewport
Code highlighting provided by Torchlight