Fix #336-Add animation on a section level and animation-none state

Netcentric · Oct 19, 2023 · f5652cc · f5652cc
1 parent 32e9145
commit f5652cc
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 38 deletions.
diff --git a/scripts/lib-franklin.js b/scripts/lib-franklin.js
@@ -319,35 +319,18 @@ export function readBlockConfig(block) {
 /**
  * adds animation on metadata level
  */
-export function addAnimation() {
+export function addAnimation(animationTypeMeta, root) {
   const addClass = (elem, className) => {
     elem.classList.add(className);
   };
 
-  const animationTypeMeta = getMetadata('animated');
+  const elementsToAnimate = root.querySelectorAll('h1, h2, h3, h4, h5, h6, a, img');
 
-  const elementsToAnimate = document.querySelectorAll('h1, h2, h3, h4, h5, h6, a, img');
-
-  const applyAnimation = (entries) => {
+  const applyAnimation = (entries, observer) => {
     entries.forEach((entry) => {
       if (entry.isIntersecting && entry.intersectionRatio >= 0.3) {
-        switch (animationTypeMeta) {
-          case 'up':
-            addClass(entry.target, 'animated-up');
-            break;
-          case 'down':
-            addClass(entry.target, 'animated-down');
-            break;
-          case 'left':
-            addClass(entry.target, 'animated-left');
-            break;
-          case 'right':
-            addClass(entry.target, 'animated-right');
-            break;
-          default:
-            break;
-        }
-        // eslint-disable-next-line no-use-before-define
+        addClass(entry.target, `animated-${animationTypeMeta}`);
+
         observer.unobserve(entry.target); // Stop observing once animation is applied
       }
     });
@@ -405,6 +388,8 @@ export function decorateSections(main) {
         if (key === 'style') {
           const styles = meta.style.split(',').map((style) => toClassName(style.trim()));
           styles.forEach((style) => section.classList.add(style));
+        } else if (key === 'animated') {
+          addAnimation(meta[key], section);
         } else {
           section.dataset[toCamelCase(key)] = meta[key];
         }
@@ -711,7 +696,7 @@ function init() {
     sampleRUM('error', { source: event.filename, target: event.lineno });
   });
 
-  addAnimation();
+  addAnimation(getMetadata('animated'), document);
 }
 
 init();
diff --git a/styles/styles.css b/styles/styles.css
@@ -732,20 +732,7 @@ main .section.text-white {
   animation: animated-left 0.5s ease-in-out forwards;
 }
 
-/* animations written on section-metadata level */
-
- .section-animated-up {
-  animation: animated-up 0.5s ease-in-out forwards;
-}
-
-  .section-animated-down {
-  animation: animated-down 0.5s ease-in-out forwards;
+.animated-none {
+  animation: none;
 }
 
- .section-animated-right {
-  animation: animated-right 0.5s ease-in-out forwards;
-}
-
- .section-animated-left {
-  animation: animated-left 0.5s ease-in-out forwards;
-}