made animation dependant on last visited page #66

gfdb-frontend/src/pages/education.js

@@ -3,31 +3,39 @@ import lccLogo from '../resources/images/lcc.jpg'
 import concordiaLogo from '../resources/images/concordia.jpg'
 import { useSpring, animated as a } from 'react-spring'
 import { useEffect, useRef, useState } from 'react'
+import { useLocation } from 'react-router-dom'
 
 const Education = () => {
 
     const experienceCardRef = useRef(null)
     const [workExpWidth, setWorkExpWidth] = useState()
+    const location = useLocation()
+
+    useEffect(() => {
+        return () => {
+            sessionStorage.setItem('lastVisited', location.pathname)
+        }
+    }, [location.pathname])
 
     const animationOnRender0 = useSpring({
         opacity: 1,
         marginLeft: workExpWidth,
-        from: {marginLeft: -1000, opacity: 0},
+        from: {marginLeft: 1000, opacity: 0},
         config: {mass: 1, tension: 150, friction: 30},
         ...animatedDivStyles
     })
 
     const animationOnRender1 = useSpring({
         opacity: 1,
         marginLeft: workExpWidth,
-        from: {marginLeft: -2000, opacity: 0},
+        from: {marginLeft: 2000, opacity: 0},
         config: {mass: 1, tension: 150, friction: 30},
         ...animatedDivStyles
     })
     const animationOnRender2 = useSpring({
         opacity: 1,
         marginLeft: workExpWidth,
-        from: {marginLeft: -3000, opacity: 0},
+        from: {marginLeft: 3000, opacity: 0},
         config: {mass: 1, tension: 125, friction: 30},
         ...animatedDivStyles
     })

gfdb-frontend/src/pages/home/home.js

@@ -1,9 +1,8 @@
 import { useEffect, useState } from 'react'
 import { loadImage } from '../../helpers'
 import HomeComponent from '../../components/home/home.js'
-// import loading from '../../resources/images/whiteG.gif'
 import loading from '../../resources/images/whiteG.gif'
-
+import { useLocation } from 'react-router-dom'
 
 const LETTER_PATH = '/letters/'
 const LOGO_PATH = '/logos/'
@@ -33,7 +32,14 @@ const SPRITES = [
 const Home = () => {
 
 	const [loaded_sprites, setLoadedSprites] = useState()
+	const location = useLocation()
 
+	useEffect(() => {
+        return () => {
+            sessionStorage.setItem('lastVisited', location.pathname)
+        }
+    }, [location.pathname])
+
 	useEffect(() => {
 		Promise.all(SPRITES.map(url => loadImage(url))).then(
 			arrayOfImageObjects => {

gfdb-frontend/src/pages/work.js

@@ -3,30 +3,39 @@ import competeLogo from '../resources/images/compete.svg'
 import haivisionLogo from '../resources/images/haivision.jpg'
 import { useSpring, animated as a } from 'react-spring'
 import { useEffect, useRef, useState } from 'react'
+import { useLocation } from 'react-router-dom'
 
 const WorkExperience = () => {
 
     const experienceCardRef = useRef(null)
     const [workExpWidth, setWorkExpWidth] = useState()
+    const location = useLocation()
+    let directionMultiplier = -1
+
+    if (sessionStorage.getItem('lastVisited') === '/')
+        directionMultiplier = -1
+
+    if (sessionStorage.getItem('lastVisited') === '/education')
+        directionMultiplier = 1
 
     const animationOnRender0 = useSpring({
         opacity: 1,
         marginLeft: workExpWidth,
-        from: {marginLeft: -1000, opacity: 0},
+        from: {marginLeft: -1000 * directionMultiplier, opacity: 0},
         config: {mass: 1, tension: 150, friction: 30},
         ...animatedDivStyles
     })
     const animationOnRender1 = useSpring({
         opacity: 1,
         marginLeft: workExpWidth,
-        from: {marginLeft: -2000, opacity: 0},
+        from: {marginLeft: -2000 * directionMultiplier, opacity: 0},
         config: {mass: 1, tension: 125, friction: 30},
         ...animatedDivStyles
     })
     const animationOnRender2 = useSpring({
         opacity: 1,
         marginLeft: workExpWidth,
-        from: {marginLeft: -3000, opacity: 0},
+        from: {marginLeft: -3000 * directionMultiplier, opacity: 0},
         config: {mass: 1, tension: 100, friction: 25},
         ...animatedDivStyles
     })
@@ -47,6 +56,13 @@ const WorkExperience = () => {
 		}
 	}, [])
 
+    useEffect(() => {
+        return () => {
+            sessionStorage.setItem('lastVisited', location.pathname)
+        }
+    }, [location.pathname])
+
+
     const competeBullets1 = [
         'Created Tool Suite to automate parts of our testing process and improve testing efficiency.',
         'Created Notifications component to display relevant messages and actions to users.',