Merge pull request #10 from JS-GitRepo/feature/LandingPageAnimations

|| ANIMATION || Fixed bug with React Spring, located in StyleContextProvider

Author: JS-GitRepo

src/App.tsx

@@ -2,8 +2,6 @@ import "./App.css";
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 import LandingPage from "./components/LandingPage";
 import HomeView from "./components/HomeView";
-import { useSpring } from "react-spring";
-import { useState } from "react";
 import WIPDisclaimer from "./components/WIPDisclaimer";
 
 function App() {

src/components/LandingPage.tsx

@@ -20,11 +20,13 @@ const LandingPage = ({}: Props) => {
   const [link1Path, setLink1Path] = useState<string>("");
   const [link2Text, setLink2Text] = useState<string>("");
   const [link2Path, setLink2Path] = useState<string>("");
-  const { currentPathContext, setCurrentPathContext } = useContext(AuthContext);
-  const { hueRotation, setHueDuration } = useContext(StyleContext);
   const currentPath = useLocation().pathname;
   const navigate = useNavigate();
 
+  // - - - - - CONTEXT - - - - -
+  const { currentPathContext, setCurrentPathContext } = useContext(AuthContext);
+  const { hueRotation, setHueDuration } = useContext(StyleContext);
+
   // - - - - - BG TRANSITION - - - - -
   const [hideLP, setHideLP] = useState<string>("");
   const [hideHV, setHideHV] = useState<string>("hide");

src/contexts/StyleContextProvider.tsx

@@ -1,7 +1,7 @@
 import { User } from "firebase/auth";
 import StyleContext from "./StyleContext";
 import { ReactNode, useEffect, useState } from "react";
-import { useSpring } from "react-spring";
+import { useSpring, config } from "react-spring";
 
 interface Props {
   children: ReactNode;
@@ -15,18 +15,17 @@ const StyleContextProvider = ({ children }: Props) => {
   const [bgAnimOff, setBgAnimOff] = useState<boolean>(false);
   const [hueDuration, setHueDuration] = useState<number>(4500);
   const hueRotation = useSpring({
+    loop: { reverse: true },
+    delay: 1000,
+    reset: true,
     to: {
       filter: "hue-rotate(130deg) saturate(80%) sepia(30%)",
     },
     from: {
       filter: "hue-rotate(0deg) saturate(100%) sepia(0%)",
     },
-    reset: false,
     cancel: bgAnimOff,
-    reverse: hueFlip,
-    delay: 1000,
-    config: { duration: hueDuration, tension: 280, friction: 60 },
-    onRest: () => setHueFlip(!hueFlip),
+    config: { duration: hueDuration },
   });
 
   const checkWindowSize = () => {