fix(Spirals): Maximum animation timing

HHogg · Jun 12, 2020 · 64bbe30 · 64bbe30
1 parent 9b0f72f
commit 64bbe30
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 11 deletions.
diff --git a/package.json b/package.json
@@ -49,7 +49,7 @@
     "vishull2d": "^0.1.0"
   },
   "devDependencies": {
-    "@types/bezier-easing": "^2.1.2",
+    "@types/bezier-easing": "*",
     "@types/classnames": "*",
     "@types/gl-matrix": "*",
     "@types/lodash.flatten": "*",

diff --git a/src/components/Projects/Spirals/Spirals.tsx b/src/components/Projects/Spirals/Spirals.tsx
@@ -109,14 +109,9 @@ const Spirals = () => {
     setPositions(positions);
     setVectors(vectors);
   }, [
+    config,
     radii,
     size,
-    config.algorithm,
-    config.aspectRatio,
-    config.cover,
-    config.padding,
-    config.proportional,
-    config.spread,
   ]);
 
   return (

diff --git a/src/components/Projects/Spirals/SpiralsVisual.tsx b/src/components/Projects/Spirals/SpiralsVisual.tsx
@@ -76,7 +76,7 @@ const SpiralsVisual = (props: Props) => {
 
         const e = time - refStartTime.current;
 
-        refTime.current = ease(e / (transitionTimeBase / 1000));
+        refTime.current = Math.min(ease(e / (transitionTimeBase / 1000)), 1);
 
         if (refRegl.current && refState.current) {
           refRegl.current.clear({ depth: 1 });
@@ -87,10 +87,12 @@ const SpiralsVisual = (props: Props) => {
             primitive: 'points',
             attributes: buffers,
             uniforms: {
+              /* eslint-disable @typescript-eslint/camelcase */
               u_projection: projection,
               u_t: refTime.current,
               u_translate_0: translate0,
               u_translate_1: translate1,
+              /* eslint-enable @typescript-eslint/camelcase */
             },
           })();
         }
@@ -107,11 +109,11 @@ const SpiralsVisual = (props: Props) => {
     }
   };
 
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     if (refCanvas.current && !refRegl.current) {
       refRegl.current = regl({ canvas: refCanvas.current });
     }
-  }, [refCanvas.current]);
+  }, []);
 
   React.useEffect(() => {
     refCanvas.current?.setAttribute('height', `${height * 2}`);

diff --git a/yarn.lock b/yarn.lock
@@ -1345,7 +1345,7 @@
   resolved "https://registry.yarnpkg.com/@protobufjs/utf8/-/utf8-1.1.0.tgz#a777360b5b39a1a2e5106f8e858f2fd2d060c570"
   integrity sha1-p3c2C1s5oaLlEG+OhY8v0tBgxXA=
 
-"@types/bezier-easing@^2.1.2":
+"@types/bezier-easing@*":
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/@types/bezier-easing/-/bezier-easing-2.1.2.tgz#04ce5a6e148543f5dca4e6066db363b19a6f294a"
   integrity sha512-1f9PSSooB7VBfwNQm5nKE8i7XXWWtjKPmm1apg52pxq/mmuyJNZpvEzR2n+c0+XPs0ldLoVWWp54tqkXsKxFsA==