vue-emerge/dist/vue-emerge.umd.js

A simple Vue component to animate elements when they enter the viewport on scroll.

(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode("[v-cloak]{display:none}@keyframes vue-emerge-animation{0%{opacity:0;transform:var(--vue-emerge-initial-transform)}to{opacity:1;transform:var(--vue-emerge-final-transform)}}.vue-emerge--animated[data-v-45cb40b6]{animation-name:var(--vue-emerge-animation-name);animation-duration:var(--vue-emerge-animation-duration);animation-timing-function:var(--vue-emerge-timing-function);animation-fill-mode:forwards;animation-delay:var(--vue-emerge-animation-delay);pointer-events:var(--vue-emerge-pointer-events)}.vue-emerge--animated.vue-emerge--animation-completed[data-v-45cb40b6]{pointer-events:auto}")),document.head.appendChild(e)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
(function(a,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(a=typeof globalThis<"u"?globalThis:a||self,t(a.VueEmerge={},a.Vue))})(this,function(a,t){"use strict";function f(n,e={}){const i=t.ref(!1);let r=null;return t.onMounted(()=>{let o=null;if(e.trigger&&(o=document.querySelector(e.trigger),o||console.warn(`vue-emerge: Trigger element with selector "${e.trigger}" not found. Falling back to observing the component itself.`)),!o){if(!n.value)return;o=n.value.$el??n.value}if(!(o instanceof Element)){console.warn("vue-emerge: The element to be observed is not a valid DOM node.");return}let u=null;e.root&&(u=document.querySelector(e.root),u||console.warn(`vue-emerge: Root element with selector "${e.root}" not found. Falling back to the browser viewport.`)),r=new IntersectionObserver(s=>{s[0].isIntersecting&&(i.value=!0,r==null||r.disconnect())},{root:u,rootMargin:`0px 0px ${e.triggerOffset} 0px`,threshold:e.threshold}),r.observe(o)}),t.onUnmounted(()=>{r==null||r.disconnect()}),{isVisible:i}}const m=((n,e)=>{const i=n.__vccOpts||n;for(const[r,o]of e)i[r]=o;return i})(t.defineComponent({__name:"Emerge",props:{root:{type:String,default:void 0},triggerOffset:{type:String,default:"0px"},threshold:{type:[Number,Array],default:0,validator:n=>{const e=i=>i>=0&&i<=1;return Array.isArray(n)?n.every(e):e(n)}},trigger:{type:String,default:void 0},tag:{type:[String,Object],default:"div"},direction:{type:String,default:"vertical",validator:n=>["vertical","horizontal"].includes(n)},moveAmount:{type:String,default:"3rem"},finalMoveAmount:{type:String,default:"0"},animationDuration:{type:Number,default:1e3},animationDelay:{type:Number,default:0},timingFunction:{type:String,default:"ease"},blockHoverOnEnter:{type:Boolean,default:!0},componentProps:{type:Object,default:()=>({})}},setup(n){const e=n,i=t.ref(null),r=t.ref(!1),o=t.reactive({name:"vue-emerge-animation",duration:`${e.animationDuration}ms`,delay:`${e.animationDelay}ms`,timingFunction:e.timingFunction}),{isVisible:u}=f(i,{root:e.root,triggerOffset:e.triggerOffset,threshold:e.threshold,trigger:e.trigger}),s=()=>{r.value=!0};t.watch(u,l=>{if(l){if(!e.blockHoverOnEnter)return;setTimeout(()=>{s()},e.animationDuration+e.animationDelay)}},{once:!0});const c=t.computed(()=>`translate${e.direction==="horizontal"?"X":"Y"}(${e.moveAmount})`),g=t.computed(()=>e.finalMoveAmount==="0"||!e.finalMoveAmount?"translate(0, 0)":`translate${e.direction==="horizontal"?"X":"Y"}(${e.finalMoveAmount})`),p=t.computed(()=>e.blockHoverOnEnter?"none":"auto"),v=t.computed(()=>{const l={"--vue-emerge-initial-transform":c.value,"--vue-emerge-final-transform":g.value,"--vue-emerge-animation-name":o.name,"--vue-emerge-animation-duration":o.duration,"--vue-emerge-animation-delay":o.delay,"--vue-emerge-timing-function":o.timingFunction,"--vue-emerge-pointer-events":p.value};return u.value?l:{transform:c.value,...l}});return(l,b)=>(t.openBlock(),t.createBlock(t.resolveDynamicComponent(n.tag),t.mergeProps({ref_key:"element",ref:i,style:[{opacity:"0"},v.value],class:["vue-emerge",{"vue-emerge--animated":t.unref(u),"vue-emerge--animation-completed":r.value}]},n.componentProps),{default:t.withCtx(()=>[t.renderSlot(l.$slots,"default",{},void 0,!0)]),_:3},16,["style","class"]))}}),[["__scopeId","data-v-45cb40b6"]]),d={install(n){n.component("Emerge",m)}};a.Emerge=m,a.default=d,Object.defineProperties(a,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});