@matteodicristofalo/text-animations 1.1.0 → 1.1.2

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

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

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

@@ -30,6 +30,7 @@ export declare const Default: Story;
 export declare const SplitByWord: Story;
 export declare const SplitBySentence: Story;
 export declare const Duration: Story;
+export declare const Delay: Story;
 export declare const Stagger: Story;
 export declare const Threshold: Story;
 export declare const NotOnce: 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;
@@ -11,7 +17,7 @@
 .split-text-reveal-module_text__-9O5o .split-text-reveal-module_container__mkD-P span {
   min-width: 0.25em;
   transform: translateY(100%);
-  transition-delay: var(--var-delay);
+  transition-delay: calc(var(--var-delay) + var(--var-stagger));
   transition-duration: var(--var-duration);
   transition-property: transform;
   transition-timing-function: ease-out;
@@ -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

@@ -80,7 +80,7 @@ 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;
@@ -121,13 +121,19 @@ 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) {
+            var _a;
+            return (React.createElement("span", { key: i, className: styles$1["container"], "aria-hidden": "true" },
+                React.createElement("span", { "aria-hidden": "true", style: {
+                        "--var-delay": "".concat((_a = revealOptions === null || revealOptions === void 0 ? void 0 : revealOptions.delay) !== null && _a !== void 0 ? _a : 0, "s"),
+                        "--var-stagger": "".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;
@@ -151,13 +157,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/package.json

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