fixed another bug where hueRotation was 'clipping' by being reset mid cycle. Also disabled call to setHueDuration longer elsewhere

Author: JS-GitRepo

src/components/HomeView.tsx

@@ -76,7 +76,7 @@ const HomeView = ({}: Props) => {
     }
     console.log(currentPath);
 
-    setHueDuration(12000);
+    // setHueDuration(12000);
   }, [currentPath]);
 
   return (

src/contexts/StyleContextProvider.tsx

@@ -1,7 +1,6 @@
-import { User } from "firebase/auth";
 import StyleContext from "./StyleContext";
 import { ReactNode, useEffect, useState } from "react";
-import { useSpring, config } from "react-spring";
+import { useSpring } from "react-spring";
 
 interface Props {
   children: ReactNode;
@@ -13,19 +12,17 @@ const StyleContextProvider = ({ children }: Props) => {
 
   // ANIMATIONS / REACT SPRING
   const [bgAnimOff, setBgAnimOff] = useState<boolean>(false);
-  const [hueDuration, setHueDuration] = useState<number>(4500);
+  const [hueDuration, setHueDuration] = useState<number>(4000);
   const hueRotation = useSpring({
-    loop: { reverse: true },
+    loop: { reverse: true, config: { duration: hueDuration } },
     delay: 1000,
-    reset: true,
     to: {
       filter: "hue-rotate(130deg) saturate(80%) sepia(30%)",
     },
     from: {
       filter: "hue-rotate(0deg) saturate(100%) sepia(0%)",
     },
-    cancel: bgAnimOff,
-    config: { duration: hueDuration },
+    config: { duration: hueDuration, precision: 0.001 },
   });
 
   const checkWindowSize = () => {