Do not use framer motion for animation

Author: Konard

example/components/chakra-boxes.tsx

@@ -1,58 +1,45 @@
 import React, { useState, useEffect, useRef } from "react";
 import { Box, VStack, Text } from "@chakra-ui/react";
-import { motion } from "framer-motion";
-
-const MotionBox = motion(Box as any);
 
 const numBoxes = 100;
 const indentations = Array.from({ length: numBoxes }, (_, i) => i * 100);
 
 const ChakraBoxes = () => {
-  const [highlightedIndex, setHighlightedIndex] = useState(0); // Directly calculate index
+  const [highlightedIndex, setHighlightedIndex] = useState(0); 
   const [offset, setOffset] = useState(0);
-  const [scrollPercentage, setScrollPercentage] = useState(0); // State for scroll percentage
-  const canvasRef = useRef();
+  const [scrollPercentage, setScrollPercentage] = useState(0); 
 
   const calculateScrollPercentage = () => {
-    const scrollTop = window.scrollY; // Distance from the top
-    const docHeight = document.documentElement.scrollHeight; // Full document height
-    const winHeight = window.innerHeight; // Visible window height
+    const scrollTop = window.scrollY; 
+    const docHeight = document.documentElement.scrollHeight; 
+    const winHeight = window.innerHeight; 
 
     const totalScrollable = docHeight - winHeight;
     const scrolled = (scrollTop / totalScrollable) * 100;
 
     setScrollPercentage(scrolled);
 
-    // Calculate the index based on the scroll percentage
     const calculatedIndex = Math.round((scrolled / 100) * (numBoxes - 1));
     setHighlightedIndex(calculatedIndex);
     setOffset(indentations[calculatedIndex]);
   };
 
   useEffect(() => {
-    // Call the function initially and on scroll
     calculateScrollPercentage();
-
     window.addEventListener('scroll', calculateScrollPercentage);
-
-    // Cleanup the scroll event listener on component unmount
     return () => {
       window.removeEventListener('scroll', calculateScrollPercentage);
     };
   }, [numBoxes]);
 
   return (
     <Box overflowX={'hidden'}>
-      <Text position="fixed" top={0} right={0} p={4} fontSize="lg" zIndex={1}>
-        Scroll Percentage: {scrollPercentage.toFixed(2)}%
+      <Text fontFamily="monospace" position="fixed" top={0} right={0} p={4} fontSize="lg" zIndex={1}>
+        Scroll Percentage: {scrollPercentage.toFixed(2).padStart(5, '0')}%
       </Text>
-      <MotionBox
-        ref={canvasRef}
-        animate={{ marginLeft: `${-offset}px` }} // Animation on margin change
-        transition={{
-          duration: 0.4,
-          ease: "easeOut", // Built-in easing function
-        }} // Adjust the transition duration
+      <Box
+        marginLeft={`${-offset}px`}
+        transition="margin-left 0.3s ease-out" 
         paddingTop={`50vh`}
         paddingBottom={`50vh`}
       >
@@ -62,9 +49,9 @@ const ChakraBoxes = () => {
               key={index}
               width="200px"
               height="50px"
-              bg={highlightedIndex === index ? "yellow.300" : "teal.300"} // Highlight the box closest to center
+              bg={highlightedIndex === index ? "yellow.300" : "teal.300"}
               mt={4}
-              ml={`${indentations[index]}px`} // Adjust left margin for indentation
+              ml={`${indentations[index]}px`}
               display="flex"
               alignItems="center"
               justifyContent="center"
@@ -74,7 +61,7 @@ const ChakraBoxes = () => {
             </Box>
           ))}
         </VStack>
-      </MotionBox>
+      </Box>
     </Box>
   );
 };