DS-692 Animation Tool Set (edits)

docs-site/src/pages/pattern-lab/_patterns/999-tests/animations/banner-test-fade-ins.twig

@@ -20,21 +20,25 @@
 
   const fadeEl = document.querySelectorAll('[class*="a-bolt-"]');
 
-  //Repeat single specific fade on click
-  function triggerThisEl(e) {
+  // Repeat single specific fade on click
+  function triggerThisEl({ target }) {
     const prefix = 'a-bolt-in--';
-    const classes = e.target.className.split(' ').filter(c => !c.startsWith(prefix));
-    const runAnimationClasses = e.target.className.split(' ').filter(c => c.startsWith(prefix));
-    e.target.className = classes.join(' ').trim();
-    e.target.classList.remove('a-bolt-cascade-fast');
+    const runAnimationClasses = [];
+
+    target.classList.forEach(c => {
+      if (c.startsWith(prefix)) {
+        runAnimationClasses.push(c);
+        target.classList.remove(c);
+      }
+    });
+
     setTimeout(() => {
-      e.target.classList.add(...runAnimationClasses)
-    }, 20)
+      target.classList.add(...runAnimationClasses);
+    }, 0);
   }
 
-  fadeEl.forEach((el) => {
-    el.addEventListener('click', triggerThisEl)
-  })
+  fadeEl.forEach(el => {
+    el.addEventListener('click', triggerThisEl);
+  });
 
 </script>
-

packages/global/styles/06-animations/_999-animations-on-load-test.js

@@ -1,9 +1,41 @@
 function playStateRunningOnLoad() {
-  document.querySelectorAll('[class*="a-bolt-"]').forEach(fade => {
-    fade.classList.add('a-bolt-running');
+  const cascadeAnimations = { slow: [], fast: [] };
+  const onLoadAnimations = [
+    ...document.querySelectorAll('[class*="a-bolt-"]'),
+  ].filter(el => {
+    if (el.classList.contains('a-bolt-cascade-fast')) {
+      cascadeAnimations.fast.push(el);
+    } else if (el.classList.contains('a-bolt-cascade-slow')) {
+      cascadeAnimations.slow.push(el);
+    } else {
+      return true;
+    }
+  });
+
+  onLoadAnimations.forEach(el => {
+    el.classList.add('a-bolt-running');
+  });
+
+  const animateWithCascade = (el, delay) => {
+    const siblings = [...el.parentElement.children].filter(
+      siblingEl => siblingEl.tagName === el.tagName,
+    );
+    const index = siblings.indexOf(el);
+
+    setTimeout(() => {
+      el.classList.add('a-bolt-running');
+    }, index * delay);
+  };
+
+  cascadeAnimations.fast.forEach(el => {
+    animateWithCascade(el, 10);
+  });
+
+  cascadeAnimations.slow.forEach(el => {
+    animateWithCascade(el, 50);
   });
 }
 
-window.onload = () => {
+window.addEventListener('load', () => {
   playStateRunningOnLoad();
-};
+});

packages/global/styles/06-animations/_animations.scss

@@ -53,15 +53,3 @@
   --bolt-animation-delay: 100ms;
   animation-delay: var(--bolt-animation-delay);
 }
-
-/* [2] */
-@for $i from 1 through 150 {
-  .a-bolt-cascade-fast:nth-of-type(#{$i}) {
-    --bolt-animation-delay: 10ms;
-    animation-delay: calc(var(--bolt-animation-delay) * #{$i});
-  }
-  .a-bolt-cascade-slow:nth-of-type(#{$i}) {
-    --bolt-animation-delay: 50ms;
-    animation-delay: calc(var(--bolt-animation-delay) * #{$i});
-  }
-}