@alpinejs/docs 3.9.2-revision.1 → 3.9.5-revision.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alpinejs/docs",
-    "version": "3.9.2-revision.1",
+    "version": "3.9.5-revision.1",
     "description": "The documentation for Alpine",
     "author": "Caleb Porzio",
     "license": "MIT"

package/src/en/essentials/installation.md

@@ -33,7 +33,7 @@ This is by far the simplest way to get started with Alpine. Include the followin
 Notice the `@3.x.x` in the provided CDN link. This will pull the latest version of Alpine version 3. For stability in production, it's recommended that you hardcode the latest version in the CDN link.
 
 ```alpine
-<script defer src="https://unpkg.com/alpinejs@3.9.2/dist/cdn.min.js"></script>
+<script defer src="https://unpkg.com/alpinejs@3.9.5/dist/cdn.min.js"></script>
 ```
 
 That's it! Alpine is now available for use inside your page.

package/src/en/plugins/intersect.md

@@ -110,7 +110,7 @@ Sometimes it's useful to evaluate an expression only the first time an element e
 <a name="half"></a>
 ### .half
 
-Evaluates the expression once the intersection threshold exceeds `0.5`. 
+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.
 
@@ -121,7 +121,7 @@ Useful for elements where it's important to show at least part of the element.
 <a name="full"></a>
 ### .full
 
-Evaluates the expression once the intersection threshold exceeds `0.99`. 
+Evaluates the expression once the intersection threshold exceeds `0.99`.
 
 Useful for elements where it's important to show the whole element.
 
@@ -129,6 +129,23 @@ 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
 ```
 
+<a name="threshold"></a>
+### .threshold
+
+Allows you to control the `threshold` property of the underlying `IntersectionObserver`:
+
+This value should be in the range of "0-100". A value of "0" means: trigger an "intersection" if ANY part of the element enters the viewport (the default behavior). While a value of "100" means: don't trigger an "intersection" unless the entire element has entered the viewport.
+
+Any value in between is a percentage of those two extremes.
+
+For example if you want to trigger an intersection after half of the element has entered the page, you can use `.threshold.50`:
+
+```alpine
+<div x-intersect.threshold.50="shown = true">...</div> // when 50% of the element is in the viewport
+```
+
+If you wanted to trigger only when 5% of the element has entered the viewport, you could use: `.threshold.05`, and so on and so forth.
+
 <a name="margin"></a>
 ### .margin