Merge pull request #154 from T-kesh/feat/css-animation-performance

Enhance CSS animation performance by optimizing transform handling an…

Author: RUKAYAT-CODER

src/components/animations/InteractiveAnimations.tsx

@@ -25,16 +25,17 @@ export default function InteractiveAnimations({
     if (!el) return;
 
     let dragging = false;
-
-    function getCoord(e: PointerEvent | MouseEvent) {
-      return (e as PointerEvent).clientX ?? (e as MouseEvent).clientX;
-    }
+    const resetCompositorHints = () => {
+      el.style.willChange = '';
+    };
 
     const onPointerDown = (e: PointerEvent) => {
       dragging = true;
       startRef.current = axis === 'x' ? e.clientX : e.clientY;
       el.setPointerCapture(e.pointerId);
       if (ctrlRef.current) ctrlRef.current.stop();
+      el.style.willChange = 'transform';
+      el.style.transform = axis === 'x' ? 'translate3d(0,0,0)' : 'translate3d(0,0,0)';
     };
 
     const onPointerMove = (e: PointerEvent) => {
@@ -66,6 +67,10 @@ export default function InteractiveAnimations({
         ctrlRef.current = engine.spring(delta, 0, (v) => {
           el.style.transform = axis === 'x' ? `translate3d(${v}px,0,0)` : `translate3d(0,${v}px,0)`;
         });
+        ctrlRef.current.onStop = () => {
+          el.style.transform = 'translate3d(0,0,0)';
+          resetCompositorHints();
+        };
       }
     };
 
@@ -77,11 +82,16 @@ export default function InteractiveAnimations({
       el.removeEventListener('pointerdown', onPointerDown);
       window.removeEventListener('pointermove', onPointerMove);
       window.removeEventListener('pointerup', onPointerUp);
+      resetCompositorHints();
     };
   }, [axis, onDismiss, threshold]);
 
   return (
-    <div ref={ref} className={className} style={{ touchAction: 'pan-y' }}>
+    <div
+      ref={ref}
+      className={className}
+      style={{ touchAction: axis === 'x' ? 'pan-y' : 'pan-x', transform: 'translate3d(0,0,0)' }}
+    >
       {children}
     </div>
   );

src/components/dashboard/AdvancedDashboard.tsx

@@ -45,12 +45,14 @@ const SortablePanel = React.memo<SortablePanelProps>(({ panel, children }) => {
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
     id: panel.id,
   });
+  const transformValue = CSS.Transform.toString(transform);
 
   const style: React.CSSProperties = {
-    transform: CSS.Transform.toString(transform),
+    transform: transformValue ? `${transformValue} translate3d(0,0,0)` : 'translate3d(0,0,0)',
     transition,
     zIndex: isDragging ? 50 : undefined,
     opacity: isDragging ? 0.75 : 1,
+    willChange: isDragging ? 'transform' : undefined,
   };
 
   return (
@@ -205,10 +207,10 @@ export const AdvancedDashboard = React.memo<AdvancedDashboardProps>(({ className
             {panels.map((panel, idx) => (
               <SortablePanel key={panel.id} panel={panel}>
                 <motion.div
-                  layout
                   initial={{ opacity: 0, y: 12 }}
                   animate={{ opacity: 1, y: 0 }}
                   transition={{ duration: 0.25, delay: idx * 0.05 }}
+                  style={{ willChange: 'transform, opacity', transform: 'translate3d(0,0,0)' }}
                   className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-5 pr-10"
                 >
                   {/* Panel header */}