@vkm-js/animate
Version:
An Alpinejs to animate things with Intersection Observer.
2 lines (1 loc) • 774 B
JavaScript
(()=>{function o(i){i.directive("animate",(t,{value:r,modifiers:a})=>{let c=["fade","zoom","up","down"],s=a.find(e=>c.includes(e))||"fade",d=a.find(e=>/^\d+$/.test(e))||r||"1000";switch(t.style.transition=`all ${d}ms ease`,s){case"fade":t.style.opacity=0;break;case"up":t.style.opacity=0,t.style.transform="translateY(20px)";break;case"down":t.style.opacity=0,t.style.transform="translateY(-50px)";break;case"zoom":t.style.opacity=0,t.style.transform="scale(0.8)";break}let n=new IntersectionObserver(([e])=>{e.isIntersecting&&(t.style.opacity=1,(s==="up"||s==="down")&&(t.style.transform="translateY(0)"),s==="zoom"&&(t.style.transform="scale(1)"),n.unobserve(t))},{threshold:.1});n.observe(t)})}document.addEventListener("alpine:init",()=>{window.Alpine.plugin(o)});})();