feat: animation — implement using dataset and reference (#299)

feat: `animation` — implement using dataset and reference

Author: EmptyWork

src/assets/js/main.js

@@ -175,14 +175,22 @@ const preloadElement = document.querySelector('.preload')
 const delayElements = document.querySelectorAll('[data-delay]')
 
 delayElements?.forEach(
-  (el) => (el.style.transitionDelay = `${parseInt(el.dataset.delay) * 100}ms`)
+  (el) => {
+    let delayModifier = 0
+    const parentElement = el.parentElement
+    const getAmountOfDelayElems = parentElement.querySelectorAll('[data-delay]').length
+    if (!parentElement.hasAttribute("data-delay-parent")) parentElement.setAttribute('data-delay-parent', true)
+    delayModifier = getAmountOfDelayElems
+
+    el.setAttribute("data-transition-delay", `${parseInt(el.dataset.delay) * 50 * (delayModifier / 2)}ms`)
+  }
 )
 
 const observer = new IntersectionObserver((entires) =>
   entires.forEach((entry) => {
     if (entry.isIntersecting)
-      return entry.target.classList.add('has-been-animated')
-    return entry.target.classList.remove('has-been-animated')
+      return entry.target.setAttribute('data-has-been-animated', true)
+    return entry.target.removeAttribute('data-has-been-animated')
   })
 )
 

src/assets/scss/components/_animation.scss

@@ -1,6 +1,7 @@
 [data-animation] {
   opacity: 0;
   transition: translate var(--_translate, 1s) ease-in-out, scale var(--_scale, 1s) ease-in-out, rotate var(--_rotate, 1s) ease-in-out, opacity var(--_opacity, 1s) ease-in-out;
+  transition-delay: attr(data-transition-delay, 0ms);
 }
 
 [data-animation='fade-in'] {
@@ -31,7 +32,7 @@
   }
 }
 
-.has-been-animated {
+.has-been-animated, [data-has-been-animated] {
   opacity: unset;
   scale: unset;
   rotate: unset;

src/assets/scss/components/_title.scss

@@ -30,13 +30,13 @@
         }
 
         &:hover {
-          .note.has-been-animated {
+          .note:is([data-has-been-animated], .has-been-animated) {
             rotate: 0deg;
             scale: 1.1;
           }
         }
 
-        .note.has-been-animated {
+        .note:is([data-has-been-animated], .has-been-animated) {
           rotate: 3deg;
           --_scale: 300ms;
           --_rotate: 700ms;