the centering is wrong lmao but heres what I have

ray10102 · ray10102 · commit dfd202aac4a3 · 2020-09-08T18:51:10.000-04:00
diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
   "version": "0.1.0",
   "author": "Kyle Mathews <mathews.kyle@gmail.com>",
   "dependencies": {
-    "anime": "^0.1.2",
+    "animejs": "^3.2.0",
     "gatsby": "^2.23.12",
     "gatsby-image": "^2.4.9",
     "gatsby-plugin-manifest": "^2.4.14",
diff --git a/src/components/animated-svg.js b/src/components/animated-svg.js
@@ -1,34 +1,33 @@
 import React from 'react';
 import styled from 'styled-components';
+import useWindowDimensions from '../hooks/useWindowDimensions';
 
 const Morph = styled.svg`
-	position: relative;
-	height: 100%;
-	fill: var(--background-color-2);
-  flex: none;
+position: absolute;
+top: -9999px;
+bottom: -9999px;
+left: -9999px;
+right: -9999px;
+margin: auto;
 `
-class AnimatedSVG extends React.Component {
-    
-
-    render(props) {
-        return (
-            <Morph className="morph" width="100%" height="100%" viewBox="0 0 1400 770">
-                <path d={props.path} />
-            </Morph>
-        )
-        /*return (
-            <Morph>
-                <Anime easing="easeOutElastic"
-                    duration={shape.animation.path.duration}
-                    direction="alternate"
-                    loop={true}
-                    autoplay={true}
-                    d={shape.pathAlt}
-                    scale={[shape.scaleX, shape.scaleY]}>
-                    <path d={shape.path} />
-                </Anime>
+const MorphWrap = styled.div`
+    position: relative;
+    overflow: hidden;
+    width:100%;
+    height:100%;
+`
+const AnimatedSVG = (props) => {
+    const { height, width } = useWindowDimensions();
+    const scale = 1.1;
+    const offset = (width / 100);
+    return (
+        <MorphWrap>
+            <Morph className="morph" width="100%" height="100%" viewBox={`${0 + offset} 0 ${(width + offset)} ${height}`}>
+                <path className="front-path" d={props.frontPath} />width - 1600)/2)
+                <path className="back-path" d={props.backPath} />
             </Morph>
-        );
-        */
-    }
-} export default AnimatedSVG;
+        </MorphWrap>
+    );
+}
+export default AnimatedSVG;
+
diff --git a/src/hooks/useWindowDimensions.js b/src/hooks/useWindowDimensions.js
@@ -0,0 +1,24 @@
+import { useState, useEffect } from 'react';
+
+function getWindowDimensions() {
+  const { innerWidth: width, innerHeight: height } = window;
+  return {
+    width,
+    height
+  };
+}
+
+export default function useWindowDimensions() {
+  const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
+
+  useEffect(() => {
+    function handleResize() {
+      setWindowDimensions(getWindowDimensions());
+    }
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return windowDimensions;
+}
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react"
 import styled from "styled-components"
-import anime from "anime"
+import anime from "animejs"
 
 import Landing from "../components/landing"
 import Values from "../components/values"
@@ -31,24 +31,34 @@ const IndexPage = () => {
   const DOM = {};
   const shapes = [
     {
-      path: "M1097.71 325.749C998.758 479.321 773.301 300.383 620.828 417.246C533.189 484.417 582.901 683.182 487.244 742.999C345.661 831.533 157.766 799.075 114.455 665.972C50.3149 468.857 246.827 454.214 315.253 370.857C417.892 245.821 141.549 21.1992 512.274 -0.79818C697.581 -11.7936 1191.95 179.503 1097.71 325.749Z",
-      pathAlt: 'M778.388 350.375C755.786 279.743 687.273 226.063 606.753 187.216C526.233 148.369 378.484 111.51 295.975 173.09C213.467 234.67 150.475 322.122 126.46 431.601C102.445 541.08 192.147 695.762 327.759 757.918C463.372 820.074 648.426 774.87 736.715 667.51C825.005 560.15 800.99 421.006 778.388 350.375Z',
-      scaleX: 1.2,
-      scaleY: 1,
+      path: ["M329.085 554.908C281.328 450.071 280.786 -9.26052 228.705 -40.6883C176.623 -72.1161 -52.9267 148.72 -1.85414 326.836C54.3956 523.008 268.363 554.736 345.912 641.025C434.268 739.339 482.986 1111.32 685.982 951.743C791.023 869.169 697.639 670.034 582.808 666.807C493.816 664.307 376.842 659.746 329.085 554.908Z",
+    "M571.999 462C723.361 343.701 695 148 938 104.5C1181 61 1560 609 1325 864.5C1151.78 1052.83 131.648 979.999 69.4995 817.5C-39.5003 532.499 420.638 580.299 571.999 462Z"],
+      pathAlt: ["M329.085 554.908C281.328 450.071 280.786 -9.26052 228.705 -40.6883C176.623 -72.1161 -52.9267 148.72 -1.85414 326.836C54.3956 523.008 268.363 554.736 345.912 641.025C434.268 739.339 482.986 1111.32 685.982 951.743C791.023 869.169 697.639 670.034 582.808 666.807C493.816 664.307 376.842 659.746 329.085 554.908Z",
+      "M571.999 462C723.361 343.701 695 148 938 104.5C1181 61 1560 609 1325 864.5C1151.78 1052.83 131.648 979.999 69.4995 817.5C-39.5003 532.499 420.638 580.299 571.999 462Z"],
+      scaleX: 1.1,
+      scaleY: 1.1,
       rotate: 0,
-      tx: -30,
-      ty: -300,
-      fill: {
-        color: '#282faf',
+      tx: 0,
+      ty: 0,
+      fill: [{
+        color: '#00ffff',
         duration: 500,
         easing: 'linear'
-      },
+      },{
+        color: '#ffff00',
+        duration: 500,
+        easing: 'linear'
+      }],
       animation: {
-        path: {
+        path: [{
           duration: 3000,
           easing: 'easeOutElastic',
           elasticity: 600
-        },
+        },{
+          duration: 3000,
+          easing: 'easeOutElastic',
+          elasticity: 600
+        }],
         svg: {
           duration: 2000,
           easing: 'easeOutElastic'
@@ -183,7 +193,8 @@ const IndexPage = () => {
     }
   ];
   DOM.svg = document.querySelector('.morph');
-  DOM.shapeEl = DOM.svg.querySelector('path');
+  DOM.frontShapeEl = DOM.svg?.querySelector('.front-path');
+  DOM.backShapeEl = DOM.svg?.querySelector('.back-path');
 
   // initShapeEl
   useEffect(() => {
@@ -198,37 +209,67 @@ const IndexPage = () => {
       translateY: shapes[0].ty + 'px',
       rotate: shapes[0].rotate + 'deg'
     });
+
   }, []);
   // initShapeLoop
   useEffect(() => {
-    anime.remove(DOM.shapeEl);
+    anime.remove(DOM.frontShapeEl);
+    anime.remove(DOM.backShapeEl);
     anime({
-      targets: DOM.shapeEl,
+      targets: DOM.frontShapeEl,
       easing: 'linear',
-      d: [{ value: shapes[initShapeLoopStep].pathAlt, duration: 3500 }, { value: shapes[initShapeLoopStep].path, duration: 3500 }],
+      d: [{ value: shapes[initShapeLoopStep].pathAlt[0], duration: 3500 }, { value: shapes[initShapeLoopStep].path[0], duration: 3500 }],
       loop: true,
       fill: {
-        value: shapes[initShapeLoopStep].fill.color,
-        duration: shapes[initShapeLoopStep].fill.duration,
-        easing: shapes[initShapeLoopStep].fill.easing
+        value: shapes[initShapeLoopStep].fill[0].color,
+        duration: shapes[initShapeLoopStep].fill[0].duration,
+        easing: shapes[initShapeLoopStep].fill[0].easing
+      },
+      direction: 'alternate'
+    });
+    anime({
+      targets: DOM.backShapeEl,
+      easing: 'linear',
+      d: [{ value: shapes[initShapeLoopStep].pathAlt[1], duration: 3500 }, { value: shapes[initShapeLoopStep].path[1], duration: 3500 }],
+      loop: true,
+      fill: {
+        value: shapes[initShapeLoopStep].fill[1].color,
+        duration: shapes[initShapeLoopStep].fill[1].duration,
+        easing: shapes[initShapeLoopStep].fill[1].easing
       },
       direction: 'alternate'
     });
   }, [initShapeLoopStep]);
 
   // On step change
   useEffect(() => {
-    anime.remove(DOM.shapeEl);
+    anime.remove(DOM.frontShapeEl);
+    anime.remove(DOM.backShapeEl);
+    anime({
+      targets: DOM.frontShapeEl,
+      duration: shapes[step].animation.path[0].duration,
+      easing: shapes[step].animation.path[0].easing,
+      elasticity: shapes[step].animation.path[0].elasticity || 0,
+      d: shapes[step].path[0],
+      fill: {
+        value: shapes[step].fill[0].color,
+        duration: shapes[step].fill[0].duration,
+        easing: shapes[step].fill[0].easing
+      },
+      complete: function () {
+        setShapeLoopStep(step);
+      }
+    });
     anime({
-      targets: DOM.shapeEl,
-      duration: shapes[step].animation.path.duration,
-      easing: shapes[step].animation.path.easing,
-      elasticity: shapes[step].animation.path.elasticity || 0,
-      d: shapes[step].path,
+      targets: DOM.backShapeEl,
+      duration: shapes[step].animation.path[1].duration,
+      easing: shapes[step].animation.path[1].easing,
+      elasticity: shapes[step].animation.path[1].elasticity || 0,
+      d: shapes[step].path[1],
       fill: {
-        value: shapes[step].fill.color,
-        duration: shapes[step].fill.duration,
-        easing: shapes[step].fill.easing
+        value: shapes[step].fill[1].color,
+        duration: shapes[step].fill[1].duration,
+        easing: shapes[step].fill[1].easing
       },
       complete: function () {
         setShapeLoopStep(step);
@@ -252,11 +293,13 @@ const IndexPage = () => {
   const getCallbacks = (idx) => {
     return {
       enterViewport: (watcher) => {
+        console.log(idx);
         setStep(idx);
       },
       exitViewport: (watcher) => {
         const pos = !watcher.isAboveViewport ? idx - 1 : idx + 1;
         if (pos <= NUM_SECTIONS && step !== pos) {
+          console.log(pos);
           setStep(pos);
         }
       }
@@ -266,7 +309,7 @@ const IndexPage = () => {
   return (
     <Background>
       <MorphWrap className="morph-wrap">
-        <AnimatedSVG path={this.shapes[0].pathAlt} />
+        <AnimatedSVG frontPath={shapes[0].pathAlt[0]} backPath={shapes[0].pathAlt[1]}/>
       </MorphWrap>
       <Landing callbacks={getCallbacks(0)} />
       <Values callbacks={getCallbacks(1)} />
diff --git a/yarn.lock b/yarn.lock
