@matteodicristofalo/text-animations 1.0.5 → 1.1.1

package/README.md

@@ -70,8 +70,10 @@ You can decide how to split the text between one of this options:
 
 You can also configure the reveal animation by specifying:
 
-- duration
-- stagger
+- duration (number in seconds)
+- stagger (number in seconds)
+- threshold (number between 0 and 1)
+- once (boolean)
 
 ```js
 "use client";
@@ -84,6 +86,8 @@ export function MyComponent() {
     () => ({
       duration: 1,
       stagger: 0.5,
+      threshold: 0.75,
+      once: false,
     }),
     []
   );

package/dist/components/split-text-reveal/split-test-reveal.types.d.ts

@@ -7,5 +7,7 @@ type SplitType = "sentence" | "word" | "char";
 type RevealOptions = {
     duration: number;
     stagger: number;
+    threshold: number;
+    once: boolean;
 };
 export {};

package/dist/components/split-text-reveal/split-text-reveal.stories.d.ts

@@ -1,11 +1,9 @@
+import React from "react";
 import type { StoryObj } from "@storybook/react";
 import { SplitTextReveal } from "./split-text-reveal";
 declare const meta: {
     title: string;
     component: typeof SplitTextReveal;
-    parameters: {
-        layout: string;
-    };
     argTypes: {
         text: {
             control: "text";
@@ -20,7 +18,18 @@ declare const meta: {
             };
         };
     };
+    args: {
+        text: string;
+        splitType: "char";
+    };
+    render: (args: import("./split-test-reveal.types").SplitTextRevealProps) => React.JSX.Element;
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const SplitByWord: Story;
+export declare const SplitBySentence: Story;
+export declare const Duration: Story;
+export declare const Stagger: Story;
+export declare const Threshold: Story;
+export declare const NotOnce: Story;

package/dist/components/split-text-rotate/split-text-rotate.stories.d.ts

@@ -1,11 +1,9 @@
+import React from "react";
 import type { StoryObj } from "@storybook/react";
 import { SplitTextRotate } from "./split-text-rotate";
 declare const meta: {
     title: string;
     component: typeof SplitTextRotate;
-    parameters: {
-        layout: string;
-    };
     argTypes: {
         text: {
             control: "text";
@@ -16,7 +14,13 @@ declare const meta: {
             };
         };
     };
+    args: {
+        text: string;
+    };
+    render: (args: import("./split-text-rotate.types").SplitTextRotateProps) => React.JSX.Element;
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const Duration: Story;
+export declare const Stagger: Story;

package/dist/index.css

@@ -4,6 +4,12 @@
 .split-text-reveal-module_text__-9O5o .split-text-reveal-module_is-hidden__2J8-i {
   opacity: 0;
 }
+.split-text-reveal-module_text__-9O5o .split-text-reveal-module_sr-only__luZuY {
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  width: 0;
+}
 .split-text-reveal-module_text__-9O5o .split-text-reveal-module_container__mkD-P {
   display: inline-flex;
   overflow: hidden;
@@ -25,6 +31,12 @@
   overflow: hidden;
   position: relative;
 }
+.split-text-rotate-module_text__xzran .split-text-rotate-module_sr-only__Dbb9O {
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  width: 0;
+}
 .split-text-rotate-module_text__xzran .split-text-rotate-module_container__EAJkE {
   display: flex;
 }

package/dist/index.js

@@ -4,6 +4,9 @@ import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react'
 function round(num, digits) {
     return parseFloat(num.toFixed(digits));
 }
+function clamp(n, min, max) {
+    return Math.min(Math.max(min, n), max);
+}
 
 function sentences(text) {
     return segment(text, "sentence");
@@ -77,16 +80,29 @@ function useIntersectionObserver(ref, options) {
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
-var styles$1 = {"text":"split-text-reveal-module_text__-9O5o","is-hidden":"split-text-reveal-module_is-hidden__2J8-i","container":"split-text-reveal-module_container__mkD-P","animate":"split-text-reveal-module_animate__y6o78"};
+var styles$1 = {"text":"split-text-reveal-module_text__-9O5o","is-hidden":"split-text-reveal-module_is-hidden__2J8-i","sr-only":"split-text-reveal-module_sr-only__luZuY","container":"split-text-reveal-module_container__mkD-P","animate":"split-text-reveal-module_animate__y6o78"};
 
 var DEFAULT_DURATION$1 = 0.5;
 var DEFAULT_STAGGER$1 = 0.01;
+var MIN_THRESHOLD = 0;
+var MAX_THRESHOLD = 1;
+var DEFAULT_THRESHOLD = 0.25;
 function SplitTextReveal(_a) {
     var _b;
     var text = _a.text, _c = _a.splitType, splitType = _c === void 0 ? "char" : _c, revealOptions = _a.revealOptions;
-    var _d = useState(false), hasBeenMounted = _d[0], setHasBeenMounted = _d[1];
     var ref = useRef(null);
-    var memoizedOptions = useMemo(function () { return ({ once: true, threshold: 0.1 }); }, []);
+    var _d = useState(false), hasBeenMounted = _d[0], setHasBeenMounted = _d[1];
+    var memoizedOptions = useMemo(function () {
+        var _a;
+        var once = (_a = revealOptions === null || revealOptions === void 0 ? void 0 : revealOptions.once) !== null && _a !== void 0 ? _a : true;
+        var threshold = (revealOptions === null || revealOptions === void 0 ? void 0 : revealOptions.threshold)
+            ? clamp(revealOptions.threshold, MIN_THRESHOLD, MAX_THRESHOLD)
+            : DEFAULT_THRESHOLD;
+        return {
+            once: once,
+            threshold: threshold,
+        };
+    }, [revealOptions]);
     var isInView = useIntersectionObserver(ref, memoizedOptions);
     var transitionDuration = (revealOptions === null || revealOptions === void 0 ? void 0 : revealOptions.duration) || DEFAULT_DURATION$1;
     var transitionStagger = (revealOptions === null || revealOptions === void 0 ? void 0 : revealOptions.stagger) || DEFAULT_STAGGER$1;
@@ -105,13 +121,15 @@ function SplitTextReveal(_a) {
     }, []);
     return (React.createElement("span", { ref: ref, className: clsx(styles$1["text"], (_b = {}, _b[styles$1["animate"]] = isInView, _b)), style: {
             "--var-duration": "".concat(transitionDuration, "s"),
-        } }, hasBeenMounted ? (splittedText.map(function (el, i) { return (React.createElement("span", { key: i, className: styles$1["container"] },
-        React.createElement("span", { style: {
-                "--var-delay": "".concat(round(transitionStagger * i, 3), "s"),
-            } }, el))); })) : (React.createElement("span", { className: styles$1["is-hidden"] }, text))));
+        } }, hasBeenMounted ? (React.createElement(React.Fragment, null,
+        React.createElement("span", { className: styles$1["sr-only"] }, text),
+        splittedText.map(function (el, i) { return (React.createElement("span", { key: i, className: styles$1["container"], "aria-hidden": "true" },
+            React.createElement("span", { "aria-hidden": "true", style: {
+                    "--var-delay": "".concat(round(transitionStagger * i, 3), "s"),
+                } }, el))); }))) : (React.createElement("span", { className: styles$1["is-hidden"] }, text))));
 }
 
-var styles = {"text":"split-text-rotate-module_text__xzran","container":"split-text-rotate-module_container__EAJkE","char":"split-text-rotate-module_char__PYJ-k"};
+var styles = {"text":"split-text-rotate-module_text__xzran","sr-only":"split-text-rotate-module_sr-only__Dbb9O","container":"split-text-rotate-module_container__EAJkE","char":"split-text-rotate-module_char__PYJ-k"};
 
 var DEFAULT_DURATION = 0.25;
 var DEFAULT_STAGGER = 0.025;
@@ -135,13 +153,15 @@ function SplitTextRotate(_a) {
     }, []);
     return (React.createElement("span", { className: styles["text"], style: {
             "--var-duration": "".concat(transitionDuration, "s"),
-        } }, hasBeenMounted ? (Array.from({ length: 2 }).map(function (_, i) { return (React.createElement("span", { key: i, className: styles["container"] }, splittedText.map(function (char, i) {
-        var charDelays = delays(i);
-        return (React.createElement("span", { key: i, className: styles["char"], style: {
-                "--var-delay-in": "".concat(charDelays.in, "s"),
-                "--var-delay-out": "".concat(charDelays.out, "s"),
-            } }, char));
-    }))); })) : (React.createElement("span", null, text))));
+        } }, hasBeenMounted ? (React.createElement(React.Fragment, null,
+        React.createElement("span", { className: styles["sr-only"] }, text),
+        Array.from({ length: 2 }).map(function (_, i) { return (React.createElement("span", { key: i, className: styles["container"], "aria-hidden": "true" }, splittedText.map(function (char, i) {
+            var charDelays = delays(i);
+            return (React.createElement("span", { key: i, className: styles["char"], "aria-hidden": "true", style: {
+                    "--var-delay-in": "".concat(charDelays.in, "s"),
+                    "--var-delay-out": "".concat(charDelays.out, "s"),
+                } }, char));
+        }))); }))) : (React.createElement("span", null, text))));
 }
 
 export { SplitTextReveal, SplitTextRotate };

package/dist/utils/numbers.d.ts

@@ -1 +1,2 @@
 export declare function round(num: number, digits: number): number;
+export declare function clamp(n: number, min: number, max: number): number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@matteodicristofalo/text-animations",
-  "version": "1.0.5",
+  "version": "1.1.1",
   "description": "React library to animate text",
   "scripts": {
     "build": "rimraf dist && rollup -c",