@neeravp/vue-3-animate-in-view/dist/vue-3-animate-in-view.min.js

Vue3 Directive & Component to animate elements as they appear in viewport

var Vue3AnimateInView=function(e){"use strict";function n(e){return n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},n(e)}function t(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==t)return;var o,r,i=[],a=!0,u=!1;try{for(t=t.call(e);!(a=(o=t.next()).done)&&(i.push(o.value),!n||i.length!==n);a=!0);}catch(e){u=!0,r=e}finally{try{a||null==t.return||t.return()}finally{if(u)throw r}}return i}(e,n)||function(e,n){if(!e)return;if("string"==typeof e)return o(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(e);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return o(e,n)}(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function o(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,o=new Array(n);t<n;t++)o[t]=e[t];return o}var r,i={observeElement:function(e,n,t,o){console.log(e);var r=function(e,n){return function(t){t.forEach((function(t){e(t,n)}))}}(t,n);new IntersectionObserver(r,o).observe(e)}};var a={detectScrollDirection:function(e){var n=window.pageYOffset,t=!1;r=function(){var o=window.pageYOffset||document.documentElement.scrollTop;t||(window.requestAnimationFrame((function(){e(n,o),n=o<=0?0:o,t=!1})),t=!0)},window.addEventListener("scroll",r)},removeEventListener:function(){window.removeEventListener("scroll",r)}};var u={apply:function(o,r,u,l,c){var s=e.computed((function(){var e="";return"string"==typeof r&&(e=r),"object"===n(r)&&(e="down"===c.value?r.down:r.up),e}));i.observeElement(o,l,(function(e,n){e.isIntersecting?(o.classList.add(s.value),n.value=!0):n.value=!1})),a.detectScrollDirection((function(e,n){c.value=n<e?"up":"down",e=n<=0?0:n})),e.watch([l,c],(function(e,i){var a=t(e,2),l=a[0],c=a[1];u||"string"!=typeof r?l?"object"===n(r)&&""!==r.up&&""!==r.down&&(console.log("isBiDirectional"),"up"===c&&(o.classList.remove(r.down),o.classList.add(s.value)),"down"===c&&(o.classList.remove(r.up),o.classList.add(s.value))):(console.log("Not in view"),o.classList.remove(s.value)):console.log("No Repeat & isDirectionAgnostic: true")}))},cleanup:function(){a.removeEventListener()}},l=e.defineComponent({name:"AnimateInView",props:{threshold:{type:Number,default:10},animation:{type:[String,Object],default:"fadeInSlide"},repeat:{type:Boolean,default:!1}},setup:function(n){var t=e.ref(null),o=e.ref(!1),r=e.ref("down");return e.onMounted((function(){console.log(t.value),u.apply(t.value,n.animation,n.repeat,o,r)})),e.onBeforeUnmount((function(){return u.cleanup()})),{target:t,isInView:o,scrollDirection:r}}}),c=e.withScopeId("data-v-679b8a2b");e.pushScopeId("data-v-679b8a2b");var s={class:"transition-all duration-1000",ref:"target"};e.popScopeId();var f=c((function(n,t,o,r,i,a){return e.openBlock(),e.createBlock("div",s,[e.renderSlot(n.$slots,"default")],512)}));!function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===t&&o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}("\n.transition-all[data-v-679b8a2b] {\n    transition-property: all;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: 150ms;\n}\n.duration-1000[data-v-679b8a2b] {\n    transition-duration: 1000ms;\n}\n"),l.render=f,l.__scopeId="data-v-679b8a2b",l.__file="src/components/AnimateInView.vue";var d={mounted:function(n,t){console.log(t);var o=e.ref(!1),r=e.ref("down"),i=t.value,a=t.modifiers.repeat||!1;u.apply(n,i,a,o,r)},beforeUnmount:function(){u.cleanup()}},p={install:function(e,n){e.directive("animate-inview",d),e.component("animate-in-view",l)}},v=Object.freeze({__proto__:null,AnimateInViewComponent:l}),m=Object.freeze({__proto__:null,AnimateInViewDirective:d});return Object.entries(v).forEach((function(e){var n=t(e,2),o=n[0],r=n[1];if("default"!==o){var i=r;p[o]=i}})),Object.entries(m).forEach((function(e){var n=t(e,2),o=n[0],r=n[1];if("default"!==o){var i=r;p[o]=i}})),p}(Vue);