create waves timeline controller, add pause func

html/assets/css/waves.css

@@ -1,36 +1,3 @@
-.waves {
-  position: relative;
-  width: 100vw;
-  height: 15vh;
-  margin-bottom: -7px;
-  min-height: 100px;
-  max-height: 150px;
-}
-
-.parallax > use {
-  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
-}
-
-.parallax > use:nth-child(1) {
-  animation-delay: -2s;
-  animation-duration: 7s;
-}
-
-.parallax > use:nth-child(2) {
-  animation-delay: -3s;
-  animation-duration: 10s;
-}
-
-.parallax > use:nth-child(3) {
-  animation-delay: -4s;
-  animation-duration: 13s;
-}
-
-.parallax > use:nth-child(4) {
-  animation-delay: -5s;
-  animation-duration: 20s;
-}
-
 @keyframes move-forever {
   0% {
     transform: translate3d(-90px,0,0);
@@ -40,24 +7,3 @@
   }
 }
 
-/* Shrinking for mobile */
-
-@media (max-width: 768px) {
-  .waves {
-    height: 40px;
-    min-height: 40px;
-  }
-}
-
-@media (max-width: 768px) {
-  .content {
-    height: 30vh;
-  }
-}
-
-@media (max-width: 768px) {
-  h1 {
-    font-size: 24px;
-  }
-}
-

html/pagescripts/index.js

@@ -45,7 +45,8 @@ const formatCardComputed = window.getComputedStyle(_temporaryFormatCard);
 const innerFormatCardStyle = _temporaryFormatCard.querySelector(`#innerFormatCard`).style;
 document.body.removeChild(_temporaryFormatCard);
 
-const { waves, setWavesColor } = generateWaves();
+const wavesController = generateWaves();
+const { waves, setWavesColor } = wavesController;
 
 waves.style.opacity = 0;
 

html/util/generateWaves.js

@@ -19,10 +19,19 @@ const generateWaves = (color) => {
     parentDiv.appendChild(nestedDiv);
 
     const svg = document.createElementNS(`http://www.w3.org/2000/svg`, `svg`);
-    svg.setAttributeNS(null, `class`, `waves`);
+
     svg.setAttributeNS(null, `viewBox`, `0 24 150 28`);
     svg.setAttributeNS(null, `preserveAspectRatio`, `none`);
     svg.setAttributeNS(null, `shape-rendering`, `auto`);
+    svg.setAttributeNS(null, `speed`, `1`);
+
+    svg.style.position = `relative`;
+    svg.style.width = `100vw`;
+    svg.style.height = `15vh`;
+    svg.style.marginBottom = `-7px`;
+    svg.style.minHeight = `100px`;
+    svg.style.maxHeight = `150px`;
+
     nestedDiv.appendChild(svg);
 
     const defs = document.createElementNS(`http://www.w3.org/2000/svg`, `defs`);
@@ -34,24 +43,86 @@ const generateWaves = (color) => {
     defs.appendChild(path);
 
     const gnode = document.createElementNS(`http://www.w3.org/2000/svg`, `g`);
-    gnode.classList.add(`parallax`);
 
-    const appendUse = (x, y, alpha) => {
+    const appendUse = (num, x, y, alpha) => {
         const use = document.createElementNS(`http://www.w3.org/2000/svg`, `use`);
-        //use.setAttributeNS(null, `xlink:href`, `#gentle-wave`);
+
         use.setAttributeNS(`http://www.w3.org/1999/xlink`, `xlink:href`, `#gentle-wave`);
         use.setAttributeNS(null, `x`, x);
         use.setAttributeNS(null, `y`, y);
         use.setAttributeNS(null, `fill`, `rgba(${r}, ${g}, ${b}, ${alpha})`);
+
+        const diff = (1 + ((num+1)/10));
+        const dur = Math.pow(7, diff);
+        const delay = Math.random() * dur * -1;
+        use.style.animation = `linear infinite normal none running move-forever`;
+        use.style.animationDelay = `${delay}s`;
+        use.style.animationDuration = `${dur}s`;
+
         gnode.appendChild(use);
         return use;
     };
 
-    const useArray = [ appendUse(48, 0, 0.7), appendUse(48, 3, 0.5), appendUse(48, 5, 0.3), appendUse(48, 7, 1) ];
+    const useArray = [ appendUse(1, 48, 0, 0.7), appendUse(2, 48, 3, 0.5), appendUse(3, 48, 5, 0.3), appendUse(4, 48, 7, 1) ];
 
     svg.appendChild(gnode);
 
-    return {
+    const mappedWaveAnims = useArray.map((use) => {
+        let animations = use.getAnimations();
+
+        return {
+            use, animations,
+            get speed() {
+                if(!animations.length) animations = use.getAnimations();
+                return animations.find(o => typeof o.playbackRate == `number`)?.playbackRate;
+            },
+            set speed(speed=1) {
+                if(!animations.length) animations = use.getAnimations();
+                animations.forEach((anim) => anim.playbackRate = speed);
+            }
+        };
+    });
+
+    const timeline = {
+        get speed() {
+            console.log(mappedWaveAnims)
+            return mappedWaveAnims[0].speed;
+        },
+        set speed(speed=1) {
+            mappedWaveAnims.forEach((anim) => anim.speed = speed);
+        },
+        anim: null,
+        setSpeed: (speed=1, {
+            duration = 1350,
+            easing = `easeOutCirc`
+        }={}) => {
+            if(timeline.anim) {
+                timeline.anim.pause();
+                delete timeline.anim;
+            }
+
+            const easingFunc = anime.easing(easing) || anime.easing(`easeInOutCirc`);
+
+            const initial = timeline.speed;
+            const difference = speed - initial;
+
+            timeline.anim = anime({
+                duration: Number(duration) || 1350,
+                update: (anim) => {
+                    timeline.speed = initial + (easingFunc(anim.progress/100) * difference);
+                    console.log(initial, speed, timeline.speed)
+                },
+                complete: () => {
+                    delete timeline.anim;
+                    timeline.speed = speed;
+                },
+            });
+
+            return timeline.anim;
+        }
+    }
+
+    const obj = {
         waves: parentDiv,
         useArray,
         setWavesColor: (color) => {
@@ -64,12 +135,15 @@ const generateWaves = (color) => {
                     easing: `easeOutExpo`,
                 });
             }
+        },
+        timeline,
+        pauseWaves: (duration=1250) => {
+            timeline.setSpeed(0, { duration, easing: `linear` });
+        },
+        resumeWaves: (duration=1250) => {
+            timeline.setSpeed(1, { duration, easing: `easeOutCirc` });
         }
     };
 
-    /*return htmlContent.map(s => {
-        if(s.includes(`rgba(255,255,255`)) s = s.replace(`rgba(255,255,255`, `rgba(${r},${g},${b}`)
-        if(s.includes(`#fff`)) s = s.replace(`#fff`, `rgb(${r},${g},${b})`)
-        return s;
-    }).join(`\n`)*/
+    return obj;
 }