revert

plugins/motion.js

@@ -0,0 +1,101 @@
+export default defineNuxtPlugin((NuxtApp) => {
+
+  NuxtApp.vueApp.directive('animate', (el, binding) => {
+    el.classList.add('animate')
+
+    el.setAttribute('data-animate-duration', binding.value.duration || 250 )
+    el.setAttribute('data-animate-delay', binding.value.delay || 200 )
+    el.setAttribute('data-animate-preset', binding.value.preset || 'fade' )
+    el.setAttribute('data-animate-stagger', binding.value.stagger || false )
+    el.setAttribute('data-animate-stagger-delay', binding.value.staggerDelay || 100 )
+  })
+
+  NuxtApp.hook('page:finish', () => {
+    const applyClasses = (el, type) => {
+      const initialClasses = JSON.parse(el.getAttribute('data-animate-initial'))
+      const animateClasses = JSON.parse(el.getAttribute('data-animate-animate'))
+
+      if (type === 'initial') {
+        Object.keys(initialClasses).forEach(x => {
+          el.style[x] = initialClasses[x] 
+        }) 
+
+        el.style['transition-property'] = 'none'
+      }
+
+      if (type === 'animate') {
+        Object.keys(animateClasses).forEach(x => {
+          el.style[x] = animateClasses[x]
+        })
+
+        el.style['transition-property'] = 'all'
+      }
+    }
+
+    const callback = (entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          applyClasses(entry.target, 'animate')
+        } else {
+          applyClasses(entry.target, 'initial')
+        }
+      })
+    }
+
+    // Configure staggering animations
+    let targets = document.querySelectorAll('.animate')
+    targets.forEach((target) => {
+      if (target.getAttribute('data-animate-stagger') === 'true') {
+        target.classList.remove('animate')
+
+        const collection = target.children
+        Object.values(collection).forEach((child, index) => {
+          child.setAttribute('data-animate-preset', target.getAttribute('data-animate-preset') )
+          child.setAttribute('data-animate-duration', target.getAttribute('data-animate-duration') )
+
+          child.style.transitionDelay = Number(target.getAttribute('data-animate-delay')) + index * Number(target.getAttribute('data-animate-stagger-delay')) + 'ms' 
+          child.classList.add('animate') 
+        })
+      } else {
+        target.style.transitionDelay = target.getAttribute('data-animate-delay') + 'ms'
+      }
+    })
+
+    
+    // Configure presets
+    const observer = new IntersectionObserver(callback)
+    targets = document.querySelectorAll('.animate')
+    
+    targets.forEach(target => {
+      const preset = target.getAttribute('data-animate-preset')
+
+      if (preset === 'fade') {
+        target.setAttribute('data-animate-initial', JSON.stringify({ opacity: 0 }))
+        target.setAttribute('data-animate-animate', JSON.stringify({ opacity: 100 }))
+
+      } else if (preset === 'slide-left') {
+        target.setAttribute('data-animate-initial', JSON.stringify({ opacity: 0, transform: 'translateX(-6em)', filter: 'blur(5px)' }))
+        target.setAttribute('data-animate-animate', JSON.stringify({ opacity: 100, transform: 'translateX(0)', filter: 'blur(0)' }))
+
+      } else if (preset === 'slide-right') {
+        target.setAttribute('data-animate-initial', JSON.stringify({ opacity: 0, transform: 'translateX(6em)', filter: 'blur(5px)' }))
+        target.setAttribute('data-animate-animate', JSON.stringify({ opacity: 100, transform: 'translateX(0)', filter: 'blur(0px)' }))
+
+      } else if (preset === 'slide-up') {
+        target.setAttribute('data-animate-initial', JSON.stringify({ opacity: 0, transform: 'translateY(-2em)', filter: 'blur(5px)' }))
+        target.setAttribute('data-animate-animate', JSON.stringify({ opacity: 100, transform: 'translateY(0)', filter: 'blur(0px)' }))
+        
+      } else if (preset === 'slide-down') {
+        target.setAttribute('data-animate-initial', JSON.stringify({ opacity: 0, transform: 'translateY(2em)', filter: 'blur(5px)' }))
+        target.setAttribute('data-animate-animate', JSON.stringify({ opacity: 100, transform: 'translateY(0)', filter: 'blur(0px)' }))
+      }
+
+      applyClasses(target, 'initial')
+
+      target.classList.add('transition-all')
+      target.style['transition-duration'] = target.getAttribute('data-animate-duration') + 'ms' 
+
+      observer.observe(target)
+    })
+  })
+})