DS-837 animate on scroll

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

@@ -1,4 +1,4 @@
-<p>An example of all fade ins on a banner component, (20 elements in total), triggered on window load. Click on the banner to see the specific single animation.</p>
+<p>An example of all fade ins cascade type, (20 elements in total), triggered on scroll. Click on the banner to see the specific single animation.</p>
 
 {% set fades = ['-in--fade', '-in--fade-up', '-in--fade-down', '-in--fade-left', '-in--fade-right'] %}
 

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

@@ -1,4 +1,4 @@
-<p>An example of a fade--in-up on teasers, (21 elements), triggered on window load</p>
+<p>An example of a fade--in-up cascade type, (21 elements), triggered on scroll</p>
 
 {% set modal_id = 'js-bolt-modal-' ~ random() %}
 

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

@@ -1,4 +1,4 @@
-<p>An example of a fade--in-up on icons, looped 25 times, triggered on window load</p>
+<p>An example of a fade--in-up cascade type, looped 25 times, triggered on scroll</p>
 
 {% for i in 0..25 %}
   {% include "@bolt-elements-icon/icon.twig" with {

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

@@ -0,0 +1,25 @@
+<p>An example of a fade--in-up cascade type, looped 50 times, triggered on scroll</p>
+<bolt-grid gutter="small" row-gutter="medium">
+{% for i in 1..50 %}
+  {% set image %}
+    {% include '@bolt-elements-image/image.twig' with {
+      attributes: {
+        alt: 'Image alt text',
+        src: 'https://via.placeholder.com/450x250',
+        width: 450,
+        height: 250,
+        class: [
+          'a-bolt-base',
+          'a-bolt-in',
+          'a-bolt-in--fade-up',
+          'a-bolt-cascade-slow',
+          'a-bolt-duration-long'
+        ]
+      },
+    } only %}
+{% endset %}
+  <bolt-grid-item row-start="auto" row-span="auto" column-start="auto" column-span="4" valign="auto" class="u-bolt-padding-medium">
+    {{ image }}
+  </bolt-grid-item>
+{% endfor %}
+</bolt-grid>

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

@@ -0,0 +1,23 @@
+<p>An example of a fade--in-up no-cascadde type, looped 50 times, triggered on scroll</p>
+<bolt-grid gutter="small" row-gutter="medium">
+{% for i in 1..50 %}
+  {% set image %}
+    {% include '@bolt-elements-image/image.twig' with {
+      attributes: {
+        alt: 'Image alt text',
+        src: 'https://via.placeholder.com/450x250',
+        width: 450,
+        height: 250,
+        class: [
+          'a-bolt-base',
+          'a-bolt-in',
+          'a-bolt-in--fade-up',
+        ]
+      },
+    } only %}
+{% endset %}
+  <bolt-grid-item row-start="auto" row-span="auto" column-start="auto" column-span="4" valign="auto" class="u-bolt-padding-medium">
+    {{ image }}
+  </bolt-grid-item>
+{% endfor %}
+</bolt-grid>

docs-site/src/pages/pattern-lab/_patterns/999-tests/animations/nested-animations-cascade.twig

@@ -0,0 +1,39 @@
+<p>An example of a fade--in-up (nested animated elements) cascade type, looped 50 times, triggered on scroll</p>
+{% set image %}
+  {% for i  in 1..3 %}
+    {% include '@bolt-elements-image/image.twig' with {
+      attributes: {
+        alt: 'Image alt text',
+        src: 'https://via.placeholder.com/450x250',
+        width: 250,
+        height: 250,
+        class: [
+          'a-bolt-base',
+          'a-bolt-in',
+          'a-bolt-in--fade-up',
+          'a-bolt-cascade-fast',
+        ]
+      },
+    } only %}
+  {% endfor %}
+{% endset %}
+<bolt-grid gutter="small" row-gutter="medium">
+{% for i in 1..50 %}
+  {% set banner %}
+    {% include '@bolt-components-banner/banner.twig' with {
+      content: image,
+      attributes: {
+        class: [
+          'a-bolt-base',
+          'a-bolt-in',
+          'a-bolt-in--fade-up',
+          'a-bolt-cascade-fast'
+        ],
+      }
+    } only %}
+  {% endset %}
+  <bolt-grid-item row-start="auto" row-span="auto" column-start="auto" column-span="4" valign="auto" class="u-bolt-padding-small">
+    {{ banner }}
+  </bolt-grid-item>
+{% endfor %}
+</bolt-grid>

docs-site/src/pages/pattern-lab/_patterns/999-tests/animations/nested-animations-no-cascade.twig

@@ -0,0 +1,37 @@
+<p>An example of a fade--in-up (nested animated elements) no-cascadde type with <strong>duration long</strong>  and <strong>delay-long</strong> in inner elements, looped 50 times, triggered on scroll</p>
+{% set image %}
+  {% for i  in 1..3 %}
+    {% include '@bolt-components-banner/banner.twig' with {
+      content: 'this inner banner is delayed by 500ms',
+      attributes: {
+        class: [
+          'a-bolt-base',
+          'a-bolt-in',
+          'a-bolt-in--fade-up',
+          'a-bolt-duration-long',
+          'a-bolt-delay-long'
+        ],
+      }
+    } only %}
+  {% endfor %}
+{% endset %}
+<bolt-grid gutter="small" row-gutter="medium">
+{% for i in 1..50 %}
+  {% set banner %}
+    {% include '@bolt-components-banner/banner.twig' with {
+      content: image,
+      attributes: {
+        class: [
+          'a-bolt-base',
+          'a-bolt-in',
+          'a-bolt-in--fade-up',
+          'a-bolt-duration-long'
+        ],
+      }
+    } only %}
+  {% endset %}
+  <bolt-grid-item row-start="auto" row-span="auto" column-start="auto" column-span="4" valign="auto" class="u-bolt-padding-small">
+    {{ banner }}
+  </bolt-grid-item>
+{% endfor %}
+</bolt-grid>

packages/global/styles/06-animations/_999-animations-on-scroll.js

@@ -0,0 +1,34 @@
+const animatedElements = document.querySelectorAll('.a-bolt-base');
+
+const callback = (entries, observer) => {
+  const runAnimationClass = 'a-bolt-running';
+
+  entries.forEach((entry, index) => {
+    if (entry.isIntersecting) {
+      let timeInterval;
+
+      if (entry.target.classList.contains('a-bolt-cascade-slow')) {
+        timeInterval = 75;
+      } else if (entry.target.classList.contains('a-bolt-cascade-fast')) {
+        timeInterval = 25;
+      }
+
+      if (timeInterval) {
+        setTimeout(() => {
+          entry.target.classList.add(runAnimationClass);
+        }, index * timeInterval);
+      } else {
+        entry.target.classList.add(runAnimationClass);
+      }
+
+      // stop observing this element
+      observer.unobserve(entry.target);
+    }
+  });
+};
+
+const myObserver = new IntersectionObserver(callback);
+
+animatedElements.forEach(el => {
+  myObserver.observe(el);
+});

packages/global/styles/index.js

@@ -1,3 +1,3 @@
 // Calculate intrinsic ratio
 import './05-objects/objects-ratio/ratio';
-import './06-animations/_999-animations-on-load-test';
+import './06-animations/_999-animations-on-scroll';