alrdy-animate/dist/chunks/gsap-hover.c6584e54e4cc818a2429.js

A library to handle animations on scroll with GSAP integration.

"use strict";(this.webpackChunkAlrdyAnimate=this.webpackChunkAlrdyAnimate||[]).push([[267],{701(e,t,o){o.r(t),o.d(t,{createHoverAnimations:()=>l});const r={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 n(e,t){const 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(e=>r[e]===Math.min(...Object.values(r)))}function a(e,t,o){let 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 i(e){const t=e.querySelectorAll("[aa-color]");return Array.from(t).map(t=>{const o=t.getAttribute("aa-color"),r=t===e&&e.settings?.colors?e.settings.colors:(n=o)?n.split(" ").reduce((e,t)=>{const[o,r]=t.split(":").map(e=>e.trim());if(o&&r){const t={bg:"backgroundColor",text:"color",border:"borderColor"};t[o]&&(e[t[o]]=r)}return e},{}):{};var n;const a=window.getComputedStyle(t),i={};return void 0!==r.backgroundColor&&(i.backgroundColor=a.backgroundColor),void 0!==r.color&&(i.color=a.color),void 0!==r.borderColor&&(i.borderColor=a.borderColor),{element:t,targetColors:r,originalColors:i}})}function s(e,t,o,r){const{hoverDelay:n=0}=r,a=t.data?.originalColors;a&&0!==a.length&&a.forEach(({element:e,targetColors:r,originalColors:a})=>{const i={delay:o?n:0,overwrite:!0};Object.keys(r).forEach(e=>{i[e]=o?r[e]:a[e]}),t.to(e,i,0)})}function l(e,t){return{initializeTextHover:(o,r)=>{!function(e,t,o,r){const{hoverDuration:n,hoverEase:a,hoverDelay:i,hoverDistance:s,hoverStagger:l,split:c,isReverse:d,hoverType:u}=r,h=e.querySelector("[aa-hover-text]");if(!h)return;const f=h.getBoundingClientRect().width,m=h.getBoundingClientRect().height,y=u.replace("-reverse",""),p=h.cloneNode(!0);p.style.position="absolute",p.style.top="0",h.after(p);const v=(e,o=!1)=>{const r=t.timeline({defaults:{ease:a,duration:n,stagger:l},paused:!0}),d=e[c.split("&")[0]];switch(y){case"text-slide-up":o&&(p.style.top=`${m}px`),r.fromTo(d,{y:0},{y:-m,delay:o?s:i});break;case"text-slide-down":o&&(p.style.top=`-${m}px`),r.fromTo(d,{y:0},{y:m,delay:o?s:i});break;case"text-slide-left":o&&(p.style.left=`${f}px`),r.fromTo(d,{x:0},{x:-f,delay:o?s:i});break;case"text-slide-right":o&&(p.style.left=`-${f}px`),r.fromTo([...d].reverse(),{x:0},{x:f,delay:o?s:i});break;case"text-fade-up":o&&(p.style.top=m/3+"px"),r.fromTo(d,{y:0,opacity:o?0:1},{y:-m/3,opacity:o?1:0,delay:o?s:i});break;case"text-fade-down":o&&(p.style.top=`-${m/3}px`),r.fromTo(d,{y:0,opacity:o?0:1},{y:m/3,opacity:o?1:0,delay:o?s:i});break;case"text-fade-left":o&&(p.style.left=f/3+"px"),r.fromTo(d,{x:0,opacity:o?0:1},{x:-f/3,opacity:o?1:0,delay:o?s:i});break;case"text-fade-right":o&&(p.style.left=`-${f/3}px`),r.fromTo([...d].reverse(),{x:0,opacity:o?0:1},{x:f/3,opacity:o?1:0,delay:o?s:i})}return r},{splitInstance:g}=o(h,c,!1,e=>v(e,!1),y),{splitInstance:b}=o(p,c,!0,e=>v(e,!0),y);e.splitInstances=[g,b],e.addEventListener("mouseenter",()=>{g.timeline&&g.timeline.restart(),b.timeline&&b.timeline.restart()}),e.addEventListener("mouseleave",()=>{d&&(g.timeline&&g.timeline.reverse(),b.timeline&&b.timeline.reverse())})}(o,e,t,r)},initializeBackgroundHover:(t,o,l)=>{switch(l){case"circle":!function(e,t,o){const{hoverDuration:r,hoverEase:l,hoverDelay:c,hoverDirection:d,bg:u}=o,h=u.querySelector("circle"),f=e.getBoundingClientRect(),m=Math.sqrt(Math.pow(f.width,2)+Math.pow(f.height,2))/f.width*1.3,y=i(e);function p(i,u){const p=a(n(i,e),d,u);let v=i.offsetX/f.width,g=i.offsetY/f.height;switch(p){case"left":v=-10/f.width;break;case"right":v=1+10/f.width;break;case"top":g=-10/f.height;break;case"bottom":g=1+10/f.height}h.setAttribute("cx",v),h.setAttribute("cy",g);const b=t.timeline({defaults:{duration:r,ease:l},data:{originalColors:y}});u?b.fromTo(h,{attr:{r:0}},{attr:{r:m},delay:c},0):b.to(h,{attr:{r:0}},0),s(0,b,u,o)}e.addEventListener("mouseenter",e=>p(e,!0)),e.addEventListener("mouseleave",e=>p(e,!1))}(t,e,o);break;case"curve":!function(e,t,o){const{hoverDuration:l,hoverEase:c,hoverDelay:d,hoverDirection:u,bg:h}=o,f=h.querySelector("path"),m=i(e);function y(r,n,a){e.timeline&&e.timeline.kill();const i=t.timeline({defaults:{duration:l,ease:c},data:{originalColors:m}});return e.timeline=i,i.fromTo(f,{attr:{d:r}},{attr:{d:n},delay:a?d:0}),s(0,i,a,o),i}e.addEventListener("mouseenter",t=>{const o=a(n(t,e),u,!0),i={top:r.fromTop,bottom:r.fromBottom,left:r.fromLeft,right:r.fromRight},s=i[o]||i.bottom;y(s.start,s.end,!0)}),e.addEventListener("mouseleave",t=>{const o=a(n(t,e),u,!1),i={top:r.toTop,bottom:r.toBottom,left:r.toLeft,right:r.toRight},s=i[o]||i.bottom;y(s.start,s.end,!1)})}(t,e,o);break;case"expand":!function(e,t,o){const{hoverDuration:r,hoverEase:n,hoverDelay:a,bg:l,isReverse:c}=o,d=i(e);let u;if(l){const t=e.getBoundingClientRect(),o=l.getBoundingClientRect(),r=(o.left+o.width/2-t.left)/t.width,n=(o.top+o.height/2-t.top)/t.height,a=Math.max(r,1-r)*t.width,i=Math.max(n,1-n)*t.height,s=2*Math.max(a,i),c=Math.max(o.width,1);u=Math.ceil(s/c*1.05)}if(c){const i=t.timeline({defaults:{ease:n,duration:r,delay:a},paused:!0,data:{originalColors:d}});s(0,i,!0,o),l&&i.to(l,{scale:u},0),e.addEventListener("mouseenter",()=>i.play()),e.addEventListener("mouseleave",()=>i.reverse())}else{const i=t.timeline({defaults:{ease:n,duration:r,delay:a},paused:!0}),c=t.timeline({defaults:{ease:n,duration:r},paused:!0}),h=t.timeline({defaults:{ease:n,duration:r},paused:!0,data:{originalColors:d}});if(l){const t=l.cloneNode(!0);t.style.position="absolute",t.style.top="0",t.style.left="0",t.style.transform="scale(0)",t.style.backgroundColor=window.getComputedStyle(e).backgroundColor,l.after(t),i.set(l,{scale:1},0).to(l,{scale:u},0),c.to(t,{scale:u,duration:.6*r,ease:"power2.in"}).set([l,t],{scale:0}).to(l,{scale:1,duration:.4*r,ease:"power2.out"})}s(0,h,!0,o),e.addEventListener("mouseenter",()=>{c.pause(0),i.restart(),h.play()}),e.addEventListener("mouseleave",()=>{i.then(()=>{c.restart(),h.reverse()})})}}(t,e,o);break;case"block":!function(e,t,o){const{hoverDuration:r,hoverEase:l,hoverDelay:c,hoverDirection:d,bg:u}=o;if(!u)return;const h=i(e),f={top:{x:0,y:-100},bottom:{x:0,y:100},left:{x:-100,y:0},right:{x:100,y:0}},m=f["all"===d?"bottom":d]||f.bottom;function y(n,a){e.timeline&&e.timeline.kill();const i=f[n]||f.bottom,d=t.timeline({defaults:{duration:r,ease:l},data:{originalColors:h}});return e.timeline=d,a?d.fromTo(u,{xPercent:i.x,yPercent:i.y},{xPercent:0,yPercent:0,delay:c}):d.fromTo(u,{xPercent:0,yPercent:0},{xPercent:i.x,yPercent:i.y}),s(0,d,a,o),d}t.set(u,{xPercent:m.x,yPercent:m.y,autoAlpha:1}),e.addEventListener("mouseenter",t=>{y(a(n(t,e),d,!0),!0)}),e.addEventListener("mouseleave",t=>{y(a(n(t,e),d,!1),!1)})}(t,e,o)}},initializeIconHover:(t,o)=>{!function(e,t,o){const{hoverDuration:r,hoverEase:n,hoverDelay:a,hoverDistance:i,hoverType:s,isReverse:l}=o,c=e.querySelector("[aa-hover-icon]");if(!c)return;const d=s.replace("-reverse",""),{iconClone:u,icon:h,clone:f}=function(e){const t=c.cloneNode(!0);t.style.position="absolute",c.after(t);let 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),{iconClone:t,...o.animation}}(d),m=t.timeline({defaults:{ease:n,duration:r,delay:a},paused:!0});m.to(c,h,0).to(u,f,i),e.addEventListener("mouseenter",()=>m.restart()),l&&e.addEventListener("mouseleave",()=>m.reverse())}(t,e,o)}}}}}]);