feat(nx-dev): make animations more performant (#27757)

It updates the animations to make them more performant, using variaous techniques to reduce the number of renders.

Author: bcabanes

nx-dev/ui-animations/src/lib/animate-value.tsx

@@ -1,5 +1,11 @@
-import { animate, useInView } from 'framer-motion';
-import { useEffect, useRef, useState } from 'react';
+import {
+  animate,
+  motion,
+  useInView,
+  useMotionValue,
+  useTransform,
+} from 'framer-motion';
+import { memo, useEffect, useRef } from 'react';
 import { usePrefersReducedMotion } from './prefers-reduced-motion';
 
 /**
@@ -13,7 +19,7 @@ import { usePrefersReducedMotion } from './prefers-reduced-motion';
  *
  * @return {JSX.Element} - The JSX element representing the animated value with suffix.
  */
-export function AnimateValue({
+function AnimateValueEngine({
   num,
   once = false,
   suffix,
@@ -23,31 +29,32 @@ export function AnimateValue({
   once?: boolean;
   suffix: string;
   decimals?: number;
-}) {
+}): JSX.Element {
   const ref = useRef<HTMLSpanElement | null>(null);
-  const [isComplete, setIsComplete] = useState<boolean>(false);
   const isInView = useInView(ref);
   const shouldReduceMotion = usePrefersReducedMotion();
+  const motionValue = useMotionValue(0);
+  const formattedValue = useTransform(motionValue, (latest) =>
+    latest.toFixed(decimals)
+  );
 
   useEffect(() => {
-    if (!isInView) return;
-    if (isComplete && once) return;
+    if (!isInView || (once && motionValue.get() === num)) return;
 
-    animate(0, num, {
+    animate(motionValue, num, {
       duration: shouldReduceMotion ? 0 : 2.5,
-      onUpdate(value) {
-        if (!ref.current) return;
-
-        ref.current.textContent = value.toFixed(decimals);
-      },
+      type: 'tween',
     });
-    setIsComplete(true);
-  }, [num, decimals, isInView, once]);
+  }, [num, isInView, once, motionValue, shouldReduceMotion]);
 
   return (
-    <span>
-      <span ref={ref}></span>
-      <span>{suffix}</span>
-    </span>
+    <>
+      <span ref={ref}>
+        <motion.span>{formattedValue}</motion.span>
+      </span>
+      {suffix}
+    </>
   );
 }
+
+export const AnimateValue = memo(AnimateValueEngine);

nx-dev/ui-animations/src/lib/blur-fade.tsx

@@ -1,12 +1,6 @@
 'use client';
-import {
-  AnimatePresence,
-  motion,
-  useInView,
-  useWillChange,
-  Variants,
-} from 'framer-motion';
-import { ReactNode, useRef } from 'react';
+import { motion, useInView, useWillChange, Variants } from 'framer-motion';
+import { ReactNode, useRef, useMemo } from 'react';
 import { usePrefersReducedMotion } from './prefers-reduced-motion';
 
 interface BlurFadeProps {
@@ -25,23 +19,6 @@ interface BlurFadeProps {
   once?: boolean;
 }
 
-/**
- * Applies a blur fade effect to its children based on the scroll position.
- *
- * @param {Object} props - The component props.
- * @param {React.ReactNode} props.children - The child elements to apply the effect to.
- * @param {string} [props.className] - The CSS class to apply to the component.
- * @param {Object} [props.variant] - The animation variants to apply.
- * @param {number} [props.duration=0.4] - The duration of the animation in seconds.
- * @param {number} [props.delay=0] - The delay before starting the animation in seconds.
- * @param {number} [props.yOffset=6] - The distance the element moves on the Y-axis during the animation.
- * @param {boolean} [props.inView=false] - Specifies whether the animation should trigger when the element is in view.
- * @param {string} [props.inViewMargin='-50px'] - The margin to consider when checking if the element is in view.
- * @param {string} [props.blur='5px'] - The amount of blur to apply to the element during the animation.
- * @param {boolean} [props.once=false] - Specifies whether the animation should only trigger once.
- *
- * @return {React.ReactNode} The component with the blur fade effect applied.
- */
 export function BlurFade({
   children,
   className,
@@ -57,36 +34,41 @@ export function BlurFade({
   const willChange = useWillChange();
   const ref = useRef(null);
   const inViewResult = useInView(ref, { once, margin: inViewMargin });
-  const isInView = !inView || inViewResult;
-  const defaultVariants: Variants = {
-    hidden: { y: yOffset, opacity: 0, filter: `blur(${blur})` },
-    visible: { y: -yOffset, opacity: 1, filter: `blur(0px)` },
-  };
-  const combinedVariants = variant || defaultVariants;
+  const isInView = useMemo(
+    () => !inView || inViewResult,
+    [inView, inViewResult]
+  );
+
+  const variants = useMemo((): Variants => {
+    return (
+      variant || {
+        hidden: { y: yOffset, opacity: 0, filter: `blur(${blur})` },
+        visible: { y: -yOffset, opacity: 1, filter: `blur(0px)` },
+      }
+    );
+  }, [variant, yOffset, blur]);
 
   const shouldReduceMotion = usePrefersReducedMotion();
+
   if (shouldReduceMotion) {
-    return;
+    return <div className={className}>{children}</div>;
   }
 
   return (
-    <AnimatePresence>
-      <motion.div
-        ref={ref}
-        initial="hidden"
-        animate={isInView ? 'visible' : 'hidden'}
-        exit="hidden"
-        variants={combinedVariants}
-        style={{ willChange }}
-        transition={{
-          delay: 0.04 + delay,
-          duration,
-          ease: 'easeOut',
-        }}
-        className={className}
-      >
-        {children}
-      </motion.div>
-    </AnimatePresence>
+    <motion.div
+      ref={ref}
+      initial="hidden"
+      animate={isInView ? 'visible' : 'hidden'}
+      variants={variants}
+      style={{ willChange: willChange }}
+      transition={{
+        delay: 0.04 + delay,
+        duration,
+        ease: 'easeOut',
+      }}
+      className={className}
+    >
+      {children}
+    </motion.div>
   );
 }

nx-dev/ui-animations/src/lib/fit-text.tsx

@@ -1,16 +1,7 @@
-import { useInView } from 'framer-motion';
-import { ComponentRef, ReactNode, useEffect, useRef } from 'react';
+import { motion, useInView, useMotionValue, useTransform } from 'framer-motion';
+import { ComponentRef, ReactNode, useEffect, useRef, useCallback } from 'react';
 import { cx } from '@nx/nx-dev/ui-primitives';
 
-/**
- * Resizes the text to fit within its container.
- *
- * @param {Object} props - The component's properties.
- * @param {ReactNode} props.children - The content to be displayed within the component.
- * @param {string} [props.className=''] - The additional className to be applied to the component.
- *
- * @return {JSX.Element} - The rendered component.
- */
 export function FitText({
   children,
   className = '',
@@ -21,23 +12,14 @@ export function FitText({
   const containerRef = useRef<ComponentRef<'div'>>(null);
   const textRef = useRef<ComponentRef<'span'>>(null);
   const isInView = useInView(containerRef);
+  const fontSize = useMotionValue(16);
+  const scaledFontSize = useTransform(fontSize, (size) => `${size}px`);
 
-  useEffect(() => {
-    if (!isInView) return;
-    resizeText();
-    window.addEventListener('resize', resizeText);
-    return () => {
-      window.removeEventListener('resize', resizeText);
-    };
-  }, [isInView, children]);
-
-  const resizeText = () => {
+  const resizeText = useCallback(() => {
     const container = containerRef.current;
     const text = textRef.current;
 
-    if (!container || !text) {
-      return;
-    }
+    if (!container || !text) return;
 
     const containerWidth = container.offsetWidth;
     let min = 1;
@@ -54,23 +36,34 @@ export function FitText({
       }
     }
 
-    text.style.fontSize = max + 'px';
-  };
+    fontSize.set(max);
+  }, [fontSize]);
+
+  useEffect(() => {
+    if (!isInView) return;
+    resizeText();
+    window.addEventListener('resize', resizeText);
+
+    return () => {
+      window.removeEventListener('resize', resizeText);
+    };
+  }, [isInView, resizeText]);
 
   return (
     <span
       className="relative grid h-full w-full grid-cols-1 place-items-center"
       ref={containerRef}
     >
-      <span
+      <motion.span
         className={cx(
           'transform whitespace-nowrap text-center font-bold',
           className
         )}
         ref={textRef}
+        style={{ fontSize: scaledFontSize }}
       >
         {children}
-      </span>
+      </motion.span>
     </span>
   );
 }