alrdy-animate
Version:
A library to handle animations on scroll with GSAP integration.
1 lines • 11.1 kB
JavaScript
"use strict";(this.webpackChunkAlrdyAnimate=this.webpackChunkAlrdyAnimate||[]).push([[267],{701:(e,t,r)=>{function o(e){return o="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},o(e)}function n(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,o)}return r}function a(e,t,r){return(t=function(e){var t=function(e){if("object"!=o(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,"string");if("object"!=o(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==o(t)?t:t+""}(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(e){return function(e){if(Array.isArray(e))return c(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||function(e,t){if(e){if("string"==typeof e)return c(e,t);var r={}.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?c(e,t):void 0}}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function c(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,o=Array(t);r<t;r++)o[r]=e[r];return o}r.r(t),r.d(t,{createHoverAnimations:()=>y});var l={fromTop:{start:"M 0 100 V 0 Q 50 0 100 0 V 0 H 0 z",end:"M 0 100 V 100 Q 50 125 100 100 V 0 H 0 z"},fromBottom:{start:"M 0 0 V 100 Q 50 100 100 100 V 100 H 0 z",end:"M 0 0 V 0 Q 50 -25 100 0 V 100 H 0 z"},toTop:{start:"M 0 100 V 100 Q 50 50 100 100 V 0 H 0 z",end:"M 0 100 V 0 Q 50 0 100 0 V 0 H 0 z"},toBottom:{start:"M 0 100 V 0 Q 50 50 100 0 V 100 z",end:"M 0 100 V 100 Q 50 100 100 100 V 100 z"},fromLeft:{start:"M 0 0 H 0 Q 0 50 0 100 H 0 V 0 z",end:"M 0 0 H 100 Q 110 50 100 100 H 0 V 0 z"},fromRight:{start:"M 100 0 H 100 Q 100 50 100 100 H 100 V 0 z",end:"M 100 0 H 0 Q -10 50 0 100 H 100 V 0 z"},toLeft:{start:"M 0 0 H 100 Q 75 50 100 100 H 0 V 0 z",end:"M 0 0 H 0 Q 0 50 0 100 H 0 V 0 z"},toRight:{start:"M 100 0 H 0 Q 25 50 0 100 H 100 V 0 z",end:"M 100 0 H 100 Q 100 50 100 100 H 100 V 0 z"}};function s(e,t){var r=t.getBoundingClientRect(),o={top:Math.abs(r.top-e.clientY),bottom:Math.abs(r.bottom-e.clientY),left:Math.abs(r.left-e.clientX),right:Math.abs(r.right-e.clientX)};return Object.keys(o).find((function(e){return o[e]===Math.min.apply(Math,i(Object.values(o)))}))}function u(e,t,r){var o=function(e,t){switch(t){case"all":return e;case"vertical":return["top","bottom"].includes(e)?e:"bottom";case"horizontal":return["left","right"].includes(e)?e:"left";case"bottom":default:return"bottom";case"top":return"top";case"left":return"left";case"right":return"right"}}(e,t);return"horizontal"!==t||["left","right"].includes(e)?"vertical"!==t||["top","bottom"].includes(e)||(o=r?"bottom":"top"):o=r?"left":"right",o}function f(e){var t={text:e.querySelectorAll("[aa-hover-text-color]"),background:e.querySelectorAll("[aa-hover-bg-color]")},r={text:[],background:[]};return t.text.length&&(r.text=Array.from(t.text).map((function(e){return window.getComputedStyle(e).color}))),t.background.length&&(r.background=Array.from(t.background).map((function(e){return window.getComputedStyle(e).backgroundColor}))),r}function d(e,t,r,o){var n=o.hoverDelay,a=void 0===n?0:n;e.querySelectorAll("[aa-hover-text-color]").forEach((function(e,o){var n,i=e.getAttribute("aa-hover-text-color"),c=null===(n=t.data)||void 0===n||null===(n=n.originalColors)||void 0===n||null===(n=n.text)||void 0===n?void 0:n[o];i&&t.to(e,{color:r?i:c,delay:r?a:0,overwrite:!0},0)})),e.querySelectorAll("[aa-hover-bg-color]").forEach((function(e,o){var n,i=e.getAttribute("aa-hover-bg-color"),c=null===(n=t.data)||void 0===n||null===(n=n.originalColors)||void 0===n||null===(n=n.background)||void 0===n?void 0:n[o];i&&t.to(e,{backgroundColor:r?i:c,delay:r?a:0,overwrite:!0},0)}))}function y(e,t){return{initializeTextHover:function(r,o){!function(e,t,r,o){var n=o.hoverDuration,a=o.hoverEase,c=o.hoverDelay,l=o.hoverDistance,s=o.hoverStagger,u=o.split,f=o.isReverse,d=o.hoverType,y=e.querySelector("[aa-hover-text]");if(y){var v=y.getBoundingClientRect().width,p=y.getBoundingClientRect().height,h=d.replace("-reverse",""),m=y.cloneNode(!0);m.style.position="absolute",m.style.top="0",y.after(m);var b=function(e){var r=arguments.length>1&&void 0!==arguments[1]&&arguments[1],o=t.timeline({defaults:{ease:a,duration:n,stagger:s},paused:!0}),f=e[u.split("&")[0]];switch(h){case"text-slide-up":r&&(m.style.top="".concat(p,"px")),o.fromTo(f,{y:0},{y:-p,delay:r?l:c});break;case"text-slide-down":r&&(m.style.top="-".concat(p,"px")),o.fromTo(f,{y:0},{y:p,delay:r?l:c});break;case"text-slide-left":r&&(m.style.left="".concat(v,"px")),o.fromTo(f,{x:0},{x:-v,delay:r?l:c});break;case"text-slide-right":r&&(m.style.left="-".concat(v,"px")),o.fromTo(i(f).reverse(),{x:0},{x:v,delay:r?l:c});break;case"text-fade-up":r&&(m.style.top="".concat(p/3,"px")),o.fromTo(f,{y:0,opacity:r?0:1},{y:-p/3,opacity:r?1:0,delay:r?l:c});break;case"text-fade-down":r&&(m.style.top="-".concat(p/3,"px")),o.fromTo(f,{y:0,opacity:r?0:1},{y:p/3,opacity:r?1:0,delay:r?l:c});break;case"text-fade-left":r&&(m.style.left="".concat(v/3,"px")),o.fromTo(f,{x:0,opacity:r?0:1},{x:-v/3,opacity:r?1:0,delay:r?l:c});break;case"text-fade-right":r&&(m.style.left="-".concat(v/3,"px")),o.fromTo(i(f).reverse(),{x:0,opacity:r?0:1},{x:v/3,opacity:r?1:0,delay:r?l:c})}return o},g=r(y,u,!1,(function(e){return b(e,!1)}),h).splitInstance,x=r(m,u,!0,(function(e){return b(e,!0)}),h).splitInstance;e.splitInstances=[g,x],e.addEventListener("mouseenter",(function(){g.timeline&&g.timeline.restart(),x.timeline&&x.timeline.restart()})),e.addEventListener("mouseleave",(function(){f&&(g.timeline&&g.timeline.reverse(),x.timeline&&x.timeline.reverse())}))}}(r,e,t,o)},initializeBackgroundHover:function(t,r,o){switch(o){case"circle":!function(e,t,r){var o=r.hoverDuration,n=r.hoverEase,a=r.hoverDelay,i=r.hoverDirection,c=r.bg.querySelector("circle"),l=e.getBoundingClientRect(),y=Math.sqrt(Math.pow(l.width,2)+Math.pow(l.height,2))/l.width*1.3,v=f(e);function p(f,p){var h=u(s(f,e),i,p),m=f.offsetX/l.width,b=f.offsetY/l.height;switch(h){case"left":m=-10/l.width;break;case"right":m=1+10/l.width;break;case"top":b=-10/l.height;break;case"bottom":b=1+10/l.height}c.setAttribute("cx",m),c.setAttribute("cy",b);var g=t.timeline({defaults:{duration:o,ease:n},data:{originalColors:v}});p?g.fromTo(c,{attr:{r:0}},{attr:{r:y},delay:a},0):g.to(c,{attr:{r:0}},0),d(e,g,p,r)}e.addEventListener("mouseenter",(function(e){return p(e,!0)})),e.addEventListener("mouseleave",(function(e){return p(e,!1)}))}(t,e,r);break;case"curve":!function(e,t,r){var o=r.hoverDuration,n=r.hoverEase,a=r.hoverDelay,i=r.hoverDirection,c=r.bg.querySelector("path"),y=f(e);function v(i,l,s){e.timeline&&e.timeline.kill();var u=t.timeline({defaults:{duration:o,ease:n},data:{originalColors:y}});return e.timeline=u,u.fromTo(c,{attr:{d:i}},{attr:{d:l},delay:s?a:0}),d(e,u,s,r),u}e.addEventListener("mouseenter",(function(t){var r=u(s(t,e),i,!0),o={top:l.fromTop,bottom:l.fromBottom,left:l.fromLeft,right:l.fromRight},n=o[r]||o.bottom;v(n.start,n.end,!0)})),e.addEventListener("mouseleave",(function(t){var r=u(s(t,e),i,!1),o={top:l.toTop,bottom:l.toBottom,left:l.toLeft,right:l.toRight},n=o[r]||o.bottom;v(n.start,n.end,!1)}))}(t,e,r);break;case"expand":!function(e,t,r){var o,n=r.hoverDuration,a=r.hoverEase,i=r.hoverDelay,c=r.bg,l=r.isReverse,s=f(e);if(c){var u=e.getBoundingClientRect(),y=c.getBoundingClientRect(),v=(y.left+y.width/2-u.left)/u.width,p=(y.top+y.height/2-u.top)/u.height,h=Math.max(v,1-v)*u.width,m=Math.max(p,1-p)*u.height,b=2*Math.max(h,m),g=Math.max(y.width,1);o=Math.ceil(b/g*1.05)}if(l){var x=t.timeline({defaults:{ease:a,duration:n,delay:i},paused:!0,data:{originalColors:s}});d(e,x,!0,r),c&&x.to(c,{scale:o},0),e.addEventListener("mouseenter",(function(){return x.play()})),e.addEventListener("mouseleave",(function(){return x.reverse()}))}else{var w=t.timeline({defaults:{ease:a,duration:n,delay:i},paused:!0}),k=t.timeline({defaults:{ease:a,duration:n},paused:!0}),P=t.timeline({defaults:{ease:a,duration:n},paused:!0,data:{originalColors:s}});if(c){var M=c.cloneNode(!0);M.style.position="absolute",M.style.top="0",M.style.left="0",M.style.transform="scale(0)",M.style.backgroundColor=window.getComputedStyle(e).backgroundColor,c.after(M),w.set(c,{scale:1},0).to(c,{scale:o},0),k.to(M,{scale:o,duration:.6*n,ease:"power2.in"}).set([c,M],{scale:0}).to(c,{scale:1,duration:.4*n,ease:"power2.out"})}d(e,P,!0,r),e.addEventListener("mouseenter",(function(){k.pause(0),w.restart(),P.play()})),e.addEventListener("mouseleave",(function(){w.then((function(){k.restart(),P.reverse()}))}))}}(t,e,r)}},initializeIconHover:function(t,r){!function(e,t,r){var o=r.hoverDuration,i=r.hoverEase,c=r.hoverDelay,l=r.hoverDistance,s=r.hoverType,u=r.isReverse,f=e.querySelector("[aa-hover-icon]");if(f){var d=function(e){var t=f.cloneNode(!0);t.style.position="absolute",f.after(t);var r={clone:{left:"-100%",top:"0"},animation:{icon:{xPercent:100},clone:{xPercent:100}}};switch(e){case"icon-right":break;case"icon-left":r.clone={left:"100%",top:"0"},r.animation={icon:{xPercent:-100},clone:{xPercent:-100}};break;case"icon-up":r.clone={left:"0",top:"100%"},r.animation={icon:{yPercent:-100},clone:{yPercent:-100}};break;case"icon-down":r.clone={left:"0",top:"-100%"},r.animation={icon:{yPercent:100},clone:{yPercent:100}};break;case"icon-up-right":r.clone={left:"-100%",top:"100%"},r.animation={icon:{xPercent:100,yPercent:-100},clone:{xPercent:100,yPercent:-100}};break;case"icon-down-right":r.clone={left:"-100%",top:"-100%"},r.animation={icon:{xPercent:100,yPercent:100},clone:{xPercent:100,yPercent:100}};break;case"icon-up-left":r.clone={left:"100%",top:"100%"},r.animation={icon:{xPercent:-100,yPercent:-100},clone:{xPercent:-100,yPercent:-100}};break;case"icon-down-left":r.clone={left:"100%",top:"-100%"},r.animation={icon:{xPercent:-100,yPercent:100},clone:{xPercent:-100,yPercent:100}}}return Object.assign(t.style,r.clone),function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?n(Object(r),!0).forEach((function(t){a(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):n(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}({iconClone:t},r.animation)}(s.replace("-reverse","")),y=d.iconClone,v=d.icon,p=d.clone,h=t.timeline({defaults:{ease:i,duration:o,delay:c},paused:!0});h.to(f,v,0).to(y,p,l),e.addEventListener("mouseenter",(function(){return h.restart()})),u&&e.addEventListener("mouseleave",(function(){return h.reverse()}))}}(t,e,r)}}}}}]);