Intersect Plugin (x-intersect)

Trigger when an element enters or leaves the viewport.

Intersect Plugin

The @alpinejs/intersect plugin uses the Intersection Observer API to let you run code when an element scrolls into or out of the viewport. It's perfect for lazy loading images, infinite scrolling, or triggering animations.

Installation

Code

npm install @alpinejs/intersect

import intersect from '@alpinejs/intersect'
Alpine.plugin(intersect)

Basic Usage

Code

<div x-data="{ visible: false }" x-intersect="visible = true">
  <p x-show="visible">Now you see me!</p>
</div>

Modifiers

You can use .once to trigger only the first time, and .threshold.50 to set the intersection threshold (0.0 – 1.0).

Code

<img x-intersect.once.threshold.30="loadImage($el)" src="placeholder.jpg">

💡 Tip

For lazy loading images, you can replace the src attribute when the element intersects.

Helpful? Share this page!↑ Back to top