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,o)=>{function r(e){return r="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},r(e)}function n(e,t){var o=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),o.push.apply(o,r)}return o}function a(e,t,o){return(t=function(e){var t=function(e){if("object"!=r(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var o=t.call(e,"string");if("object"!=r(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==r(t)?t:t+""}(t))in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,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 o={}.toString.call(e).slice(8,-1);return"Object"===o&&e.constructor&&(o=e.constructor.name),"Map"===o||"Set"===o?Array.from(e):"Arguments"===o||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o)?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 o=0,r=Array(t);o<t;o++)r[o]=e[o];return r}o.r(t),o.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 o=t.getBoundingClientRect(),r={top:Math.abs(o.top-e.clientY),bottom:Math.abs(o.bottom-e.clientY),left:Math.abs(o.left-e.clientX),right:Math.abs(o.right-e.clientX)};return Object.keys(r).find((function(e){return r[e]===Math.min.apply(Math,i(Object.values(r)))}))}function u(e,t,o){var r=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)||(r=o?"bottom":"top"):r=o?"left":"right",r}function f(e){var t={text:e.querySelectorAll("[aa-hover-text-color]"),background:e.querySelectorAll("[aa-hover-bg-color]")},o={text:[],background:[]};return t.text.length&&(o.text=Array.from(t.text).map((function(e){return window.getComputedStyle(e).color}))),t.background.length&&(o.background=Array.from(t.background).map((function(e){return window.getComputedStyle(e).backgroundColor}))),o}function d(e,t,o,r){var n=r.hoverDelay,a=void 0===n?0:n;e.querySelectorAll("[aa-hover-text-color]").forEach((function(e,r){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[r];i&&t.to(e,{color:o?i:c,delay:o?a:0,overwrite:!0},0)})),e.querySelectorAll("[aa-hover-bg-color]").forEach((function(e,r){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[r];i&&t.to(e,{backgroundColor:o?i:c,delay:o?a:0,overwrite:!0},0)}))}function y(e,t){return{initializeTextHover:function(o,r){!function(e,t,o,r){var n=r.hoverDuration,a=r.hoverEase,c=r.hoverDelay,l=r.hoverDistance,s=r.hoverStagger,u=r.split,f=r.isReverse,d=r.hoverType,y=e.querySelector("[aa-hover-text]");if(y){var p=y.getBoundingClientRect().width,v=y.getBoundingClientRect().height,m=d.replace("-reverse",""),h=y.cloneNode(!0);h.style.position="absolute",h.style.top="0",y.after(h);var b=o(y,u).splitElements,g=o(h,u).splitElements,x=b[u.split("&")[0]],w=g[u.split("&")[0]],k=t.timeline({defaults:{ease:a,duration:n,stagger:s},paused:!0});switch(m){case"text-slide-up":h.style.top="".concat(v,"px"),k.fromTo(x,{y:0},{y:-v,delay:c}).fromTo(w,{y:0},{y:-v,delay:l},"<");break;case"text-slide-down":h.style.top="-".concat(v,"px"),k.fromTo(x,{y:0},{y:v,delay:c}).fromTo(w,{y:0},{y:v,delay:l},"<");break;case"text-slide-left":h.style.left="".concat(p,"px"),k.fromTo(x,{x:0},{x:-p,delay:c}).fromTo(w,{x:0},{x:-p,delay:l},"<");break;case"text-slide-right":h.style.left="-".concat(p,"px"),k.fromTo(i(x).reverse(),{x:0},{x:p,delay:c}).fromTo(i(w).reverse(),{x:0},{x:p,delay:l},"<");break;case"text-fade-up":h.style.top="".concat(v/3,"px"),k.fromTo(x,{y:0,opacity:1},{y:-v/3,opacity:0,delay:c}).fromTo(w,{y:0,opacity:0},{y:-v/3,opacity:1,delay:l},"<");break;case"text-fade-down":h.style.top="-".concat(v/3,"px"),k.fromTo(x,{y:0,opacity:1},{y:v/3,opacity:0,delay:c}).fromTo(w,{y:0,opacity:0},{y:v/3,opacity:1,delay:l},"<");break;case"text-fade-left":h.style.left="".concat(p/3,"px"),k.fromTo(x,{x:0,opacity:1},{x:-p/3,opacity:0,delay:c}).fromTo(w,{x:0,opacity:0},{x:-p/3,opacity:1,delay:l},"<");break;case"text-fade-right":h.style.left="-".concat(p/3,"px"),k.fromTo(i(x).reverse(),{x:0,opacity:1},{x:p/3,opacity:0,delay:c}).fromTo(i(w).reverse(),{x:0,opacity:0},{x:p/3,opacity:1,delay:l},"<")}e.addEventListener("mouseenter",(function(){k.restart()})),e.addEventListener("mouseleave",(function(){f&&k.reverse()}))}}(o,e,t,r)},initializeBackgroundHover:function(t,o,r){switch(r){case"circle":!function(e,t,o){var r=o.hoverDuration,n=o.hoverEase,a=o.hoverDelay,i=o.hoverDirection,c=o.bg.querySelector("circle"),l=e.getBoundingClientRect(),y=Math.sqrt(Math.pow(l.width,2)+Math.pow(l.height,2))/l.width*1.3,p=f(e);function v(f,v){var m=u(s(f,e),i,v),h=f.offsetX/l.width,b=f.offsetY/l.height;switch(m){case"left":h=-10/l.width;break;case"right":h=1+10/l.width;break;case"top":b=-10/l.height;break;case"bottom":b=1+10/l.height}c.setAttribute("cx",h),c.setAttribute("cy",b);var g=t.timeline({defaults:{duration:r,ease:n},data:{originalColors:p}});v?g.fromTo(c,{attr:{r:0}},{attr:{r:y},delay:a},0):g.to(c,{attr:{r:0}},0),d(e,g,v,o)}e.addEventListener("mouseenter",(function(e){return v(e,!0)})),e.addEventListener("mouseleave",(function(e){return v(e,!1)}))}(t,e,o);break;case"curve":!function(e,t,o){var r=o.hoverDuration,n=o.hoverEase,a=o.hoverDelay,i=o.hoverDirection,c=o.bg.querySelector("path"),y=f(e);function p(i,l,s){e.timeline&&e.timeline.kill();var u=t.timeline({defaults:{duration:r,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,o),u}e.addEventListener("mouseenter",(function(t){var o=u(s(t,e),i,!0),r={top:l.fromTop,bottom:l.fromBottom,left:l.fromLeft,right:l.fromRight},n=r[o]||r.bottom;p(n.start,n.end,!0)})),e.addEventListener("mouseleave",(function(t){var o=u(s(t,e),i,!1),r={top:l.toTop,bottom:l.toBottom,left:l.toLeft,right:l.toRight},n=r[o]||r.bottom;p(n.start,n.end,!1)}))}(t,e,o);break;case"expand":!function(e,t,o){var r,n=o.hoverDuration,a=o.hoverEase,i=o.hoverDelay,c=o.bg,l=o.isReverse,s=f(e);if(c){var u=e.getBoundingClientRect(),y=c.getBoundingClientRect(),p=(y.left+y.width/2-u.left)/u.width,v=(y.top+y.height/2-u.top)/u.height,m=Math.max(p,1-p)*u.width,h=Math.max(v,1-v)*u.height,b=2*Math.max(m,h),g=Math.max(y.width,1);r=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,o),c&&x.to(c,{scale:r},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:r},0),k.to(M,{scale:r,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,o),e.addEventListener("mouseenter",(function(){k.pause(0),w.restart(),P.play()})),e.addEventListener("mouseleave",(function(){w.then((function(){k.restart(),P.reverse()}))}))}}(t,e,o)}},initializeIconHover:function(t,o){!function(e,t,o){var r=o.hoverDuration,i=o.hoverEase,c=o.hoverDelay,l=o.hoverDistance,s=o.hoverType,u=o.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 o={clone:{left:"-100%",top:"0"},animation:{icon:{xPercent:100},clone:{xPercent:100}}};switch(e){case"icon-right":break;case"icon-left":o.clone={left:"100%",top:"0"},o.animation={icon:{xPercent:-100},clone:{xPercent:-100}};break;case"icon-up":o.clone={left:"0",top:"100%"},o.animation={icon:{yPercent:-100},clone:{yPercent:-100}};break;case"icon-down":o.clone={left:"0",top:"-100%"},o.animation={icon:{yPercent:100},clone:{yPercent:100}};break;case"icon-up-right":o.clone={left:"-100%",top:"100%"},o.animation={icon:{xPercent:100,yPercent:-100},clone:{xPercent:100,yPercent:-100}};break;case"icon-down-right":o.clone={left:"-100%",top:"-100%"},o.animation={icon:{xPercent:100,yPercent:100},clone:{xPercent:100,yPercent:100}};break;case"icon-up-left":o.clone={left:"100%",top:"100%"},o.animation={icon:{xPercent:-100,yPercent:-100},clone:{xPercent:-100,yPercent:-100}};break;case"icon-down-left":o.clone={left:"100%",top:"-100%"},o.animation={icon:{xPercent:-100,yPercent:100},clone:{xPercent:-100,yPercent:100}}}return Object.assign(t.style,o.clone),function(e){for(var t=1;t<arguments.length;t++){var o=null!=arguments[t]?arguments[t]:{};t%2?n(Object(o),!0).forEach((function(t){a(e,t,o[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(o)):n(Object(o)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(o,t))}))}return e}({iconClone:t},o.animation)}(s),y=d.iconClone,p=d.icon,v=d.clone,m=t.timeline({defaults:{ease:i,duration:r,delay:c},paused:!0});m.to(f,p,0).to(y,v,l),e.addEventListener("mouseenter",(function(){return m.restart()})),u&&e.addEventListener("mouseleave",(function(){return m.reverse()}))}}(t,e,o)}}}}}]);