react-awesome-reveal 4.0.0-beta.1 → 4.0.0-beta.2

package/README.md

@@ -31,8 +31,8 @@
 
 - 🎁 **Modern stack** – It is built for modern React and supports React 18
 - 🏷 **TypeScript support** – It is written in TypeScript to improve the DX
-- 🍃 **Lightweight** – Very little footprint on your project and no other dependencies required
-- ⚙️ **Uses native APIs** – Intersection Observer and CSS Animations are now supported by all major browsers
+- 🍃 **Lightweight** – Very little footprint on your project
+- ⚙️ **Uses native APIs** – Intersection Observer and CSS Animations are now supported by all browsers
 - 🚀 **Fast** – Buttery smooth experience thanks to the use of native asynchronous APIs and hardware acceleration
 - 💅 **Fully customizable** – Define custom animations and let the library render them
 - 💻 **SSR support** – Server Side Rendering works out-of-the-box

package/dist/main.js

@@ -568,83 +568,41 @@ function $6a26e8abc0402dd5$export$f832f653c73e86f8(value) {
 }
 
 
-const $c8a4d927fd00b892$var$hiddenCss = $jvNZe$emotionreact.css`
+const $c8a4d927fd00b892$var$hiddenStyles = $jvNZe$emotionreact.css`
   opacity: 0;
 `;
-const $c8a4d927fd00b892$var$textBaseCss = $jvNZe$emotionreact.css`
+const $c8a4d927fd00b892$var$textBaseStyles = $jvNZe$emotionreact.css`
   display: inline-block;
   white-space: pre;
 `;
 const $c8a4d927fd00b892$export$9a32a8eb4bb56ca3 = (props)=>{
     const { cascade: cascade = false , damping: damping = 0.5 , delay: delay = 0 , duration: duration = 1000 , fraction: fraction = 0 , keyframes: keyframes = $059dd4d1a0e7c5c8$export$d8fce5eeb232a07b , triggerOnce: triggerOnce = false , css: revealCss , className: className , style: style , childClassName: childClassName , childStyle: childStyle , children: children , onVisibilityChange: onVisibilityChange ,  } = props;
-    if ($6a26e8abc0402dd5$export$bedb7023a7733221(children)) return null;
-    if ($6a26e8abc0402dd5$export$f832f653c73e86f8(children)) {
-        const stringifiedChildren = String(children);
-        return cascade ? $jvNZe$emotionreactjsxruntime.jsx($jvNZe$reactintersectionobserver.InView, {
-            threshold: fraction,
-            triggerOnce: triggerOnce,
-            onChange: onVisibilityChange,
-            children: ({ inView: inView , ref: ref  })=>$jvNZe$emotionreactjsxruntime.jsx("div", {
-                    ref: ref,
-                    className: className,
-                    css: [
-                        revealCss,
-                        $c8a4d927fd00b892$var$textBaseCss
-                    ],
-                    style: style,
-                    children: stringifiedChildren.split("").map((char, index)=>$jvNZe$emotionreactjsxruntime.jsx("span", {
-                            className: className,
-                            css: inView ? $f2597d38a334a0ad$export$cdf1f51c52cf49d8({
-                                keyframes: keyframes,
-                                delay: delay + index * duration * damping,
-                                duration: duration
-                            }) : $c8a4d927fd00b892$var$hiddenCss,
-                            children: char
-                        }, index)
-                    )
-                })
-        }) : $jvNZe$emotionreactjsxruntime.jsx($c8a4d927fd00b892$export$9a32a8eb4bb56ca3, {
-            delay: delay,
-            duration: duration,
-            fraction: fraction,
+    const animationStyles = $jvNZe$react.useMemo(()=>$f2597d38a334a0ad$export$cdf1f51c52cf49d8({
             keyframes: keyframes,
-            triggerOnce: triggerOnce,
-            css: revealCss,
-            className: className,
-            style: style,
-            children: stringifiedChildren
-        });
-    }
-    if ($jvNZe$reactis.isFragment(children)) return $jvNZe$emotionreactjsxruntime.jsx($jvNZe$reactintersectionobserver.InView, {
-        threshold: fraction,
-        triggerOnce: triggerOnce,
-        onChange: onVisibilityChange,
-        children: ({ inView: inView , ref: ref  })=>$jvNZe$emotionreactjsxruntime.jsx("div", {
-                ref: ref,
-                className: className,
-                css: inView ? [
-                    revealCss,
-                    $f2597d38a334a0ad$export$cdf1f51c52cf49d8({
-                        keyframes: keyframes,
-                        delay: delay,
-                        duration: duration
-                    })
-                ] : $c8a4d927fd00b892$var$hiddenCss,
-                style: style,
-                children: children
-            })
+            duration: duration
+        })
+    , [
+        duration,
+        keyframes
+    ]);
+    if ($6a26e8abc0402dd5$export$bedb7023a7733221(children)) return null;
+    if ($6a26e8abc0402dd5$export$f832f653c73e86f8(children)) return $jvNZe$emotionreactjsxruntime.jsx($c8a4d927fd00b892$var$TextReveal, {
+        ...props,
+        animationStyles: animationStyles,
+        children: String(children)
+    });
+    if ($jvNZe$reactis.isFragment(children)) return $jvNZe$emotionreactjsxruntime.jsx($c8a4d927fd00b892$var$FragmentReveal, {
+        ...props,
+        animationStyles: animationStyles
     });
     return $jvNZe$emotionreactjsxruntime.jsx($jvNZe$emotionreactjsxruntime.Fragment, {
         children: $jvNZe$react.Children.map(children, (node, index)=>{
             if (!/*#__PURE__*/ $jvNZe$react.isValidElement(node)) return null;
-            const nodeCss = node.props.css ? [
-                node.props.css
-            ] : [];
-            nodeCss.push($f2597d38a334a0ad$export$cdf1f51c52cf49d8({
-                keyframes: keyframes,
-                delay: delay + (cascade ? index * duration * damping : 0),
-                duration: duration
-            }));
+            const inViewStyles = [
+                revealCss,
+                animationStyles
+            ];
+            const nodeDelay = delay + (cascade ? index * duration * damping : 0);
             switch(node.type){
                 case "ol":
                 case "ul":
@@ -657,16 +615,7 @@ const $c8a4d927fd00b892$export$9a32a8eb4bb56ca3 = (props)=>{
                                     ...node.props.style
                                 },
                                 children: $jvNZe$emotionreactjsxruntime.jsx($c8a4d927fd00b892$export$9a32a8eb4bb56ca3, {
-                                    cascade: cascade,
-                                    damping: damping,
-                                    delay: delay,
-                                    duration: duration,
-                                    fraction: fraction,
-                                    keyframes: keyframes,
-                                    triggerOnce: triggerOnce,
-                                    css: revealCss,
-                                    childClassName: childClassName,
-                                    childStyle: childStyle,
+                                    ...props,
                                     children: node.props.children
                                 })
                             })
@@ -681,13 +630,11 @@ const $c8a4d927fd00b892$export$9a32a8eb4bb56ca3 = (props)=>{
                                         ...node.props,
                                         ref: ref,
                                         className: cx(childClassName, node.props.className),
-                                        css: inView ? [
-                                            revealCss,
-                                            ...nodeCss
-                                        ] : $c8a4d927fd00b892$var$hiddenCss,
+                                        css: inView ? inViewStyles : $c8a4d927fd00b892$var$hiddenStyles,
                                         style: {
                                             ...childStyle,
-                                            ...node.props.style
+                                            ...node.props.style,
+                                            animationDelay: nodeDelay + "ms"
                                         }
                                     })
                             })
@@ -700,11 +647,11 @@ const $c8a4d927fd00b892$export$9a32a8eb4bb56ca3 = (props)=>{
                         children: ({ inView: inView , ref: ref  })=>$jvNZe$emotionreactjsxruntime.jsx("div", {
                                 ref: ref,
                                 className: className,
-                                css: inView ? [
-                                    revealCss,
-                                    ...nodeCss
-                                ] : $c8a4d927fd00b892$var$hiddenCss,
-                                style: style,
+                                css: inView ? inViewStyles : $c8a4d927fd00b892$var$hiddenStyles,
+                                style: {
+                                    ...style,
+                                    animationDelay: nodeDelay + "ms"
+                                },
                                 children: $jvNZe$emotionreactjsxruntime.jsx($jvNZe$emotionreact.ClassNames, {
                                     children: ({ cx: cx  })=>$jvNZe$emotionreactjsxruntime.jsx(node.type, {
                                             ...node.props,
@@ -721,6 +668,53 @@ const $c8a4d927fd00b892$export$9a32a8eb4bb56ca3 = (props)=>{
         })
     });
 };
+const $c8a4d927fd00b892$var$TextReveal = (props)=>{
+    const { animationStyles: animationStyles , cascade: cascade = false , damping: damping = 0.5 , delay: delay = 0 , duration: duration = 1000 , fraction: fraction = 0 , triggerOnce: triggerOnce = false , css: revealCss , className: className , style: style , children: children , onVisibilityChange: onVisibilityChange ,  } = props;
+    const { ref: ref , inView: inView  } = $jvNZe$reactintersectionobserver.useInView({
+        triggerOnce: triggerOnce,
+        threshold: fraction,
+        onChange: onVisibilityChange
+    });
+    return cascade ? $jvNZe$emotionreactjsxruntime.jsx("div", {
+        ref: ref,
+        className: className,
+        css: [
+            revealCss,
+            $c8a4d927fd00b892$var$textBaseStyles
+        ],
+        style: style,
+        children: children.split("").map((char, index)=>$jvNZe$emotionreactjsxruntime.jsx("span", {
+                css: inView ? animationStyles : $c8a4d927fd00b892$var$hiddenStyles,
+                style: {
+                    animationDelay: delay + index * duration * damping + "ms"
+                },
+                children: char
+            }, index)
+        )
+    }) : $jvNZe$emotionreactjsxruntime.jsx($c8a4d927fd00b892$export$9a32a8eb4bb56ca3, {
+        ...props,
+        children: children
+    });
+};
+const $c8a4d927fd00b892$var$FragmentReveal = (props)=>{
+    const { animationStyles: animationStyles , fraction: fraction = 0 , triggerOnce: triggerOnce = false , css: revealCss , className: className , style: style , children: children , onVisibilityChange: onVisibilityChange ,  } = props;
+    const { ref: ref , inView: inView  } = $jvNZe$reactintersectionobserver.useInView({
+        triggerOnce: triggerOnce,
+        threshold: fraction,
+        onChange: onVisibilityChange
+    });
+    const inViewStyles = [
+        revealCss,
+        animationStyles
+    ];
+    return $jvNZe$emotionreactjsxruntime.jsx("div", {
+        ref: ref,
+        className: className,
+        css: inView ? inViewStyles : $c8a4d927fd00b892$var$hiddenStyles,
+        style: style,
+        children: children
+    });
+};
 
 
 function $53b8ad22b050830b$var$getStyles(effect) {