alrdy-animate/dist/chunks/gsap-section.b0ac94f8596881af7348.js

A library to handle animations on scroll with GSAP integration.

"use strict";(this.webpackChunkAlrdyAnimate=this.webpackChunkAlrdyAnimate||[]).push([[955],{608(e,t,r){function o(e){const t=Array.from(e.querySelectorAll("[aa-clip-trigger]")),r=Array.from(e.querySelectorAll("[aa-clip-content]")),o=Array.from(e.querySelectorAll("[aa-clip-background]")),a=r.length,n={vertical:{start:"polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",end:"polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)",initial:"polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)"},right:{start:"polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",end:"polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)",initial:"polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%)"},left:{start:"polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",end:"polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%)",initial:"polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)"}};t.forEach((e,t)=>{const i=r[t],l=o[t];if(!i)return;i.style.zIndex=a-t;const c=i.getAttribute("aa-clip-content")||"vertical",s=n[c],p=r[t+1],g=p?p.getAttribute("aa-clip-content")||"vertical":null,u=g?n[g]:null,d=gsap.timeline({scrollTrigger:{trigger:e,start:0===t?"top top":"top bottom",end:t===a-1?"bottom bottom":"bottom top",scrub:!0},defaults:{ease:"none"}});0===t?(gsap.set(i,{clipPath:s.start}),g===c?d.to(i,{clipPath:s.end}):g&&u&&d.to(i,{clipPath:u.end})):t===a-1?(gsap.set(i,{clipPath:s.initial}),d.to(i,{clipPath:s.start})):(gsap.set(i,{clipPath:s.initial}),d.to(i,{clipPath:s.start}),g===c?d.to(i,{clipPath:s.end}):g&&u&&d.to(i,{clipPath:u.end})),l&&gsap.timeline({scrollTrigger:{trigger:e,start:"top top",end:"bottom top",scrub:!0},defaults:{ease:"none"}}).to(l,{yPercent:50})})}function a(e,t,r){const o=Array.from(e.querySelectorAll("[aa-stack-trigger]")),a=Array.from(e.querySelectorAll("[aa-stack-content]")),n=a.length;a.forEach((e,t)=>{gsap.set(e,{opacity:0,zIndex:n-t})}),o.forEach((e,o)=>{const n=a[o];n&&gsap.timeline({scrollTrigger:{trigger:e,start:"top center",end:"bottom center",scrub:!!t&&(parseFloat(t)||!0)}}).fromTo(n,{opacity:0,yPercent:10*r},{opacity:1,yPercent:0,duration:.2},0).to(n,{opacity:1,yPercent:0,duration:.6},.2).to(n,{opacity:0,yPercent:-10*r,duration:.2},.8)})}function n(e,t,r,o=!1){if(ScrollTrigger.isTouch)return void(o&&console.log("Pin animation disabled on touch device for better user experience"));const a=e.getAttribute("aa-pin-type"),n={trigger:e,pin:!0,start:t,end:r,pinSpacing:!1,markers:o,invalidateOnRefresh:!0};a&&(n.pinType=a),ScrollTrigger.create(n)}function i(e,t,r,o=!1,a=null,n=null){if(ScrollTrigger.isTouch)return void(o&&console.log("Pin-stack animation disabled on touch device for better user experience"));const i=Array.from(e.children),l=e.settings.distance;if(0===i.length)return void console.warn('aa-animate="pin-stack": No children found to stack');const c=e.hasAttribute("aa-pin-trigger-animations")?parseFloat(e.getAttribute("aa-pin-trigger-animations")):.7,u=parseFloat(getComputedStyle(e).rowGap)||0;gsap.set(e,{display:"grid",perspective:"1000px"}),i.forEach(e=>{gsap.set(e,{gridArea:"1 / 1 / 2 / 2"})});const d=i.map(e=>e.offsetHeight),f=e.getAttribute("aa-pin-type"),m={trigger:e,start:t,end:r,scrub:!0,pin:!0,pinSpacing:!0,markers:o,invalidateOnRefresh:!0};f&&(m.pinType=f);const y=gsap.timeline({defaults:{ease:"none"},scrollTrigger:m});return i.forEach((t,r)=>{t.setAttribute("data-pin-stack-card",r);const o=Array.from(t.querySelectorAll("[aa-animate]"));0===r?(o.forEach(t=>{t.setAttribute("aa-pinned-container",e.id||`pin-stack-${Date.now()}`)}),e.id||(e.id=`pin-stack-${Date.now()}`)):o.forEach(e=>{e.setAttribute("aa-event-trigger","")})}),p(i,d,u,y,a,l),n&&g(i,0,0,y,n,l),e.pinStackTimeline=y,e.pinStackConfig={children:i,gap:u,inAnimation:a,outAnimation:n,distance:l,debug:o,triggerOffset:c},setTimeout(()=>{const t=window.scrollY,r=t+.5*window.innerHeight,o=e.getBoundingClientRect(),a=o.top+t,n=o.bottom+t,l=n<r;if(a<=r&&n>=r){const e=y.time();i.forEach((t,r)=>{if(0===r)return;const o=Array.from(t.querySelectorAll("[aa-animate]"));0!==o.length&&e>=r-c&&o.forEach(e=>{e._delayedCall&&e._delayedCall.kill(),e.classList.add("in-view"),e.style.visibility="visible",e.timeline&&e.timeline.progress(1)})})}else l&&i.forEach((e,t)=>{if(0===t)return;const r=Array.from(e.querySelectorAll("[aa-animate]"));0!==r.length&&r.forEach(e=>{e._delayedCall&&e._delayedCall.kill(),e.classList.add("in-view"),e.style.visibility="visible",e.timeline&&e.timeline.progress(1)})})},100),s(i,y,c),y}function l(e){if(!e.pinStackTimeline||!e.pinStackConfig)return;const{children:t,inAnimation:r,outAnimation:o,distance:a,debug:n,triggerOffset:i}=e.pinStackConfig,l=e.pinStackTimeline,u=l.time(),d=parseFloat(getComputedStyle(e).rowGap)||0,f=t.map(e=>e.offsetHeight);l.clear(),delete l._directionTrackingSetup,t.forEach(e=>{gsap.set(e,{gridArea:"1 / 1 / 2 / 2",clearProps:"y,x,opacity,scale,rotation,rotationX,filter"})}),p(t,f,d,l,r,a),o&&g(t,0,0,l,o,a),s(t,l,i),l.time(u),l._previousProgress=l.progress(),function(e,t,r){e.forEach((e,o)=>{if(0===o)return;const a=Array.from(e.querySelectorAll("[aa-animate]")),n=t>=o-r;a.forEach(e=>{n?(e._delayedCall&&e._delayedCall.kill(),e.classList.add("in-view"),e.style.visibility="visible",e.timeline&&e.timeline.progress(1)):c(e)})})}(t,u,i),e.pinStackConfig.gap=d}function c(e){e.dispatchEvent(new CustomEvent("aa-event-trigger",{detail:{action:"reverse",timeScale:1}}))}function s(e,t,r,o){var a;(a=t)._directionTrackingSetup||(a._previousProgress=a._previousProgress??a.progress(),a.eventCallback("onUpdate",()=>{const e=a.progress();a._isReversing=e<a._previousProgress,a._previousProgress=e}),a._directionTrackingSetup=!0),e.forEach((e,o)=>{if(0===o)return;const a=Array.from(e.querySelectorAll("[aa-animate]"));0!==a.length&&(t.call(()=>{t._isReversing||a.forEach(e=>{var t,r;t=e,r=e.settings?.delay||0,t.dispatchEvent(new CustomEvent("aa-event-trigger",{detail:{action:"play",timeScale:1,delay:r||0}}))})},null,o-r),t.call(()=>{t._isReversing&&a.forEach(e=>{c(e)})},null,o-1))})}function p(e,t,r,o,a,n){e.forEach((e,i)=>{const l=t[i];let c=(l+r)*i,s=0;const p={duration:1*i,ease:"none"};switch(a){case"fade":p.opacity=0;break;case"scale":gsap.set(e,{transformOrigin:"center center"}),p.scale=.8*n;break;case"rotate":gsap.set(e,{transformOrigin:"center center"}),p.rotation=15*(i%2==0?1:-1),s=.5*l*n}p.y=c+s,o.from(e,p,0)})}function g(e,t,r,o,a,n){e.forEach((t,r)=>{if(r===e.length-1)return;"perspective"===a&&gsap.set(t,{transformOrigin:"top center",transformStyle:"preserve-3d"});const i=r,l=e.length-r-1,c={ease:"none"};switch(a){case"perspective":c.scale=.9+.025*r,c.rotationX=-15,c.y=-2*n+"rem",c.duration=l;break;case"right":c.x=4*n+"rem",c.duration=l;break;case"left":c.x=-4*n+"rem",c.duration=l;break;case"scale":c.scale=.85*n,c.duration=1;break;case"blur":c.filter="blur(8px)",c.scale=.9,c.y=-4*n+"rem",c.duration=1;break;case"fade":c.opacity=0,c.duration=1;break;case"fade-scale":c.opacity=0,c.scale=.85*n,c.duration=1;break;default:return}o.to(t,c,i)})}function u(e,t){return{backgroundColor:(r,o,a,n,i,l,c)=>{!function(e,t,r,o,a,n,i,l=!1,c){function s(e){return e?e.split(";").reduce((e,t)=>{const[r,o]=t.split(":").map(e=>e.trim());return"bg"!==r&&"text"!==r||(e["bg"===r?"backgroundColor":"color"]=o),e},{}):{}}function p(e){return Object.keys(e).length>0}function g(e,r){p(r)&&t.set(e,r)}const u=getComputedStyle(e),d={backgroundColor:u.backgroundColor,color:u.color},f=Array.from(e.querySelectorAll("[aa-wrapper-colors]")).map((e,t)=>{const r=s(e.getAttribute("aa-wrapper-colors")),o=Array.from(e.querySelectorAll("[aa-item-colors]")).map(e=>{const t=s(e.getAttribute("aa-item-colors"));return{element:e,colors:t}}),a=s(e.getAttribute("aa-item-colors"));let n=null;return p(a)&&(n={element:e,colors:a}),{element:e,colors:r,items:n?[n,...o]:o}});0!==f.length&&(setTimeout(()=>{const t=window.scrollY,r=t+.5*window.innerHeight;let o=-1;for(let e=0;e<f.length;e++){const a=f[e].element.getBoundingClientRect(),n=a.top+t,i=a.bottom+t;if(n<=r&&i>=r){o=e;break}}if(o>=0){const t=f[o];g(e,t.colors),t.items.forEach(e=>{g(e.element,e.colors)})}else g(e,d)},100),f.forEach((s,g)=>{const u=g>0?f[g-1]:null;if(c){const o=t.timeline({defaults:{duration:1,ease:"none"},paused:!0,data:{index:g}});if(p(s.colors)){const t=u?{backgroundColor:u.colors.backgroundColor,color:u.colors.color}:d;o.fromTo(e,t,s.colors,0)}s.items.forEach(e=>{p(e.colors)&&o.to(e.element,{backgroundColor:e.colors.backgroundColor,color:e.colors.color},"<")}),r.create({trigger:s.element,start:n,end:i,scrub:!!c&&(parseFloat(c)||!0),animation:o,markers:l,invalidateOnRefresh:!0,fastScrollEnd:!0,preventOverlaps:!0}),s.element.dataset.stId=`background-${g}`}else{const i=t.timeline({paused:!0,defaults:{duration:o,ease:a}});p(s.colors)&&i.to(e,s.colors),s.items.forEach(e=>{p(e.colors)&&i.to(e.element,{...e.colors},"<")}),r.create({trigger:s.element,start:n,onEnter:()=>{i.play()},onLeaveBack:()=>{i.reverse()},markers:l})}}))}(r,e,t,o,a,n,i,l,c)},clip:e=>o(e),stack:(e,t,r)=>a(e,t,r),pin:(e,t,r,o)=>{n(e,t,r,o)},pinStack:(e,t,r,o,a,n)=>i(e,t,r,o,a,n),updatePinStackOnResize:e=>{l(e)}}}r.r(t),r.d(t,{createSectionAnimations:()=>u})}}]);