alrdy-animate/dist/chunks/gsap-accordion.8dbddc18f55186218ade.js

A library to handle animations on scroll with GSAP integration.

"use strict";(this.webpackChunkAlrdyAnimate=this.webpackChunkAlrdyAnimate||[]).push([[151],{665(t,e,a){a.r(e),a.d(e,{createAccordionAnimations:()=>l});var i=a(543);let r=0;class o{constructor(t,e=1){this.accordion=t,this.defaultDuration=e,this.wrappers=[],this.toggles=[],this.contents=[],this.visuals=[],this.useWrapperPattern=!1,this.elementMap=new Map,this.initializeElements()}initializeElements(){this.wrappers=Array.from(this.accordion.querySelectorAll("[aa-accordion-wrapper]")),this.useWrapperPattern=this.wrappers.length>0,this.toggles=Array.from(this.accordion.querySelectorAll("[aa-accordion-toggle]")),this.contents=Array.from(this.accordion.querySelectorAll("[aa-accordion-content]")),this.visuals=Array.from(this.accordion.querySelectorAll("[aa-accordion-visual]")),this.toggles.forEach(t=>{const e=t.getAttribute("aa-accordion-toggle"),a=this.accordion.querySelector(`[aa-accordion-content="${e}"]`),i=this.accordion.querySelector(`[aa-accordion-visual="${e}"]`),r=t.querySelector("[aa-accordion-progress]");let o=null;this.useWrapperPattern&&(o=t.closest("[aa-accordion-wrapper]"));const s=parseFloat(t.getAttribute("aa-duration"))||this.defaultDuration,n=parseFloat(t.getAttribute("aa-delay"))||0,c=a&&parseFloat(a.getAttribute("aa-duration"))||this.defaultDuration/2,l=i&&parseFloat(i.getAttribute("aa-duration"))||this.defaultDuration,u=i&&parseFloat(i.getAttribute("aa-delay"))||0,g=(l+u)/2;this.elementMap.set(e,{toggle:t,content:a,visual:i,progressElement:r,wrapper:o,duration:s,delay:n,contentDuration:c,reverseDuration:(s+n)/2,visualDuration:l,visualDelay:u,visualReverseDuration:g})}),this.setupEventTriggering()}setupEventTriggering(){this.toggles.forEach(t=>{const e=t.getAttribute("aa-accordion-toggle"),a=this.elementMap.get(e);a&&(a.content&&this.markElementsForEventTriggering(a.content),a.visual&&this.markElementsForEventTriggering(a.visual))})}markElementsForEventTriggering(t){[...t.hasAttribute("aa-animate")?[t]:[],...t.querySelectorAll("[aa-animate]")].forEach(t=>{t.setAttribute("aa-event-trigger","")})}getElementData(t){return this.elementMap.get(t)}getAllToggles(){return this.toggles}getActiveToggle(){if(this.useWrapperPattern){const t=this.accordion.querySelector('[aa-accordion-wrapper][aa-accordion-status="active"]');return t?t.querySelector("[aa-accordion-toggle]"):null}return this.accordion.querySelector('[aa-accordion-toggle][aa-accordion-status="active"]')}getActiveVisual(){return this.accordion.querySelector('[aa-accordion-visual][aa-accordion-status="active"]')}getActiveVisualData(){const t=this.getActiveVisual();if(!t)return null;const e=t.getAttribute("aa-accordion-visual");return this.getElementData(e)}getStatusElement(t,e){return this.useWrapperPattern&&t.wrapper?t.wrapper:e}isAccordionActive(t,e){return"active"===this.getStatusElement(t,e).getAttribute("aa-accordion-status")}setAccordionStatus(t,e,a){this.getStatusElement(t,e).setAttribute("aa-accordion-status",a)}}class s{constructor(t,e,a=1){this.accordion=t,this.state=e,this.defaultDuration=a,this.accordionType=t.getAttribute("aa-accordion")||"basic",this.isMulti="multi"===this.accordionType,this.isAutoplay="autoplay"===this.accordionType,this.isScroll="scroll"===this.accordionType,this.isSingle="single"===this.accordionType,this.refreshTimer=null,this.debouncedRefresh=this.debouncedRefresh.bind(this),this.setupEventDelegation()}debouncedRefresh(){this.refreshTimer&&this.refreshTimer.kill(),this.refreshTimer=gsap.delayedCall(.1,()=>{window.ScrollTrigger&&window.ScrollTrigger.refresh(),this.refreshTimer=null})}setupEventDelegation(){this.accordion.addEventListener("click",t=>{const e=t.target.closest("[aa-accordion-toggle]");e&&this.handleToggle(e)}),this.accordion.addEventListener("keydown",t=>{const e=t.target.closest("[aa-accordion-toggle]");e&&("Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.handleToggle(e)))})}handleToggle(t){const e=t.getAttribute("aa-accordion-toggle"),a=this.state.getElementData(e);if(!a)return;const i=this.state.isAccordionActive(a,t);i&&this.isSingle||(i?this.closeAccordion(t,a):this.openAccordion(t,a))}openAccordion(t,e){const{toggleId:a,content:i,visual:r,wrapper:o}=e;if(!this.isMulti){const e=this.state.getActiveToggle();if(e&&e!==t){const t=e.getAttribute("aa-accordion-toggle"),a=this.state.getElementData(t);a&&this.closeAccordion(e,a)}}this.state.setAccordionStatus(e,t,"active"),i?t.setAttribute("aria-expanded","true"):t.setAttribute("aria-selected","true"),r&&r.setAttribute("aria-hidden","false"),i&&(gsap.set(i,{gridTemplateRows:"1fr"}),this.state.useWrapperPattern||i.setAttribute("aa-accordion-status","active"),n(i,"play")),r&&this.handleVisualOpening(r,e),gsap.delayedCall(e.contentDuration,()=>{this.debouncedRefresh()})}closeAccordion(t,e){const{content:a,visual:i,contentDuration:r,reverseDuration:o,wrapper:s}=e;this.state.setAccordionStatus(e,t,"inactive"),a?t.setAttribute("aria-expanded","false"):t.setAttribute("aria-selected","false"),i&&i.setAttribute("aria-hidden","true"),a&&(this.state.useWrapperPattern||a.setAttribute("aa-accordion-status","inactive"),gsap.set(a,{gridTemplateRows:"0fr"}),n(a,"reverse")),i&&(n(i,"reverse"),gsap.delayedCall(e.visualReverseDuration,()=>{gsap.set(i,{visibility:"hidden"}),i.setAttribute("aa-accordion-status","inactive")})),this.resetProgressBar(e),gsap.delayedCall(r,()=>{this.debouncedRefresh()})}handleVisualOpening(t,e){const a=this.state.getActiveVisualData();a&&a.visual!==t?gsap.delayedCall(a.visualReverseDuration,()=>{this.startVisualAnimation(t)}):this.startVisualAnimation(t)}startVisualAnimation(t){t.setAttribute("aa-accordion-status","active"),gsap.set(t,{visibility:"visible"}),n(t,"play")}resetProgressBar(t){const{progressElement:e,toggle:a}=t;if(!e)return;const i=a.querySelector('circle[aa-accordion-progress="circle"]');if(i)i.style.strokeDasharray="10000",i.style.strokeDashoffset="10000";else{const t=e.getAttribute("aa-accordion-progress")||"width";gsap.set(e,{[t]:0})}}triggerAccordionAnimations(t,e){n(t,e)}}function n(t,e){const a=[...t.hasAttribute("aa-animate")?[t]:[],...t.querySelectorAll("[aa-animate]")];(0,i.I)(a,e)}function c(t,e=null,a=null,i=1,c=null){const l=r++;!function(t){const e=t.querySelectorAll("[aa-accordion-wrapper]");if(e.length>0)e.forEach((t,e)=>{const a=t.getAttribute("aa-accordion-wrapper")||`accordion-${e}`;t.getAttribute("aa-accordion-wrapper")||t.setAttribute("aa-accordion-wrapper",a);const i=t.querySelector("[aa-accordion-toggle]"),r=t.querySelector("[aa-accordion-content]");i&&!i.getAttribute("aa-accordion-toggle")&&i.setAttribute("aa-accordion-toggle",a),r&&!r.getAttribute("aa-accordion-content")&&r.setAttribute("aa-accordion-content",a)}),t.querySelectorAll("[aa-accordion-visual]").forEach((t,e)=>{t.getAttribute("aa-accordion-visual")||t.setAttribute("aa-accordion-visual",`accordion-${e}`)});else{const e=t.querySelectorAll("[aa-accordion-toggle]"),a=t.querySelectorAll("[aa-accordion-content]"),i=t.querySelectorAll("[aa-accordion-visual]");e.forEach((t,e)=>{t.getAttribute("aa-accordion-toggle")||t.setAttribute("aa-accordion-toggle",`accordion-${e}`)}),a.forEach((t,e)=>{t.getAttribute("aa-accordion-content")||t.setAttribute("aa-accordion-content",`accordion-${e}`)}),i.forEach((t,e)=>{t.getAttribute("aa-accordion-visual")||t.setAttribute("aa-accordion-visual",`accordion-${e}`)})}}(t),"scroll"===c&&window.ScrollTrigger&&ScrollTrigger.isTouch&&(t.setAttribute("aa-accordion","single"),c="single");const u=new o(t,i),g=new s(t,u,i);!function(t,e,a,i,r=1,o=0){const s=t.querySelector("[aa-accordion-initial]"),c="single"===(t.getAttribute("aa-accordion")||"basic");if(e.toggles.forEach(t=>{const a=t.getAttribute("aa-accordion-toggle"),i=e.getElementData(a);e.setAccordionStatus(i,t,"inactive"),!e.useWrapperPattern&&i.content&&i.content.setAttribute("aa-accordion-status","inactive"),function(t,e,a,i,r){const o=`accordion-${r}-toggle-${i}`,s=`accordion-${r}-content-${i}`,n=`accordion-${r}-visual-${i}`;t.setAttribute("id",o),t.setAttribute("tabindex","0"),e&&a?(t.setAttribute("role","button"),t.setAttribute("aria-expanded","false"),t.setAttribute("aria-controls",s),e.setAttribute("id",s),e.setAttribute("aria-labelledby",o),e.setAttribute("role","region"),a.setAttribute("id",n),a.setAttribute("aria-hidden","true")):e?(t.setAttribute("role","button"),t.setAttribute("aria-expanded","false"),t.setAttribute("aria-controls",s),e.setAttribute("id",s),e.setAttribute("aria-labelledby",o),e.setAttribute("role","region")):a&&(t.setAttribute("role","tab"),t.setAttribute("aria-selected","false"),t.setAttribute("aria-controls",n),a.setAttribute("id",n),a.setAttribute("aria-labelledby",o),a.setAttribute("role","tabpanel"))}(t,i.content,i.visual,a,o),i.content&&i.content.querySelectorAll('[aa-animate*="text"]').forEach(t=>t.setAttribute("aa-aria-false","")),i.visual&&(i.visual.setAttribute("aa-accordion-status","inactive"),gsap.set(i.visual,{visibility:"hidden"}))}),0===e.contents.length&&e.visuals.length>0&&e.toggles.length>0){const t=e.toggles[0].parentElement;t&&t.setAttribute("role","tablist")}e.contents.forEach(t=>{const e=parseFloat(t.getAttribute("aa-duration"))||r/2;t.style.setProperty("--aa-duration",`${e}s`)});let l=s;if(c&&!l&&e.toggles.length>0&&(l=e.toggles[0]),l){const t=l.getAttribute("aa-accordion-toggle"),a=e.getElementData(t);if(a){const t=()=>{e.setAccordionStatus(a,l,"active"),a.content?l.setAttribute("aria-expanded","true"):l.setAttribute("aria-selected","true"),a.visual&&a.visual.setAttribute("aria-hidden","false"),a.content&&(gsap.set(a.content,{gridTemplateRows:"1fr"}),e.useWrapperPattern||a.content.setAttribute("aa-accordion-status","active"),n(a.content,"play")),a.visual&&(a.visual.setAttribute("aa-accordion-status","active"),gsap.set(a.visual,{visibility:"visible"}),n(a.visual,"play"))};document.addEventListener("aa-text-splitting-complete",t,{once:!0}),gsap.delayedCall(.1,()=>{e.isAccordionActive(a,l)||t()})}}}(t,u,0,0,i,l),"scroll"===c?function(t,e,a){if(!window.ScrollTrigger)return;const i=t.getAttribute("aa-scroll-start")||"top 20%",r=t.getAttribute("aa-distance")||"30",o=t.getAttribute("aa-scrub")||"true",s=e.toggles.length,n=s*parseFloat(r)*window.innerHeight/100,c=t.querySelector("[aa-accordion-initial]"),l=c&&e.toggles[0]===c;let u=l?0:-1;const g={value:0},d=gsap.to(g,{value:1,duration:1,ease:"none",paused:!0,onUpdate:()=>{const t=g.value;let i;if(i=l||t>0?Math.min(Math.floor(t*s),s-1):-1,u!==i){if(u>=0){const t=e.toggles[u],i=t.getAttribute("aa-accordion-toggle"),r=e.getElementData(i);r&&a.closeAccordion(t,r)}if(i>=0){const t=e.toggles[i],r=t.getAttribute("aa-accordion-toggle"),o=e.getElementData(r);o&&a.openAccordion(t,o)}u=i}!function(t,e,a,i){t.forEach((t,r)=>{const o=t.querySelector("[aa-accordion-progress]");if(!o)return;const s=o.getAttribute("aa-accordion-progress")||"width";if(r===e){const e=a*i-r,n=Math.max(0,Math.min(1,e));if("circle"===s){const e=t.querySelector('circle[aa-accordion-progress="circle"]');if(e){const t=parseFloat(e.getAttribute("r"))||25,a=2*Math.PI*t,i=a-n*a;e.style.strokeDashoffset=i}}else gsap.set(o,{[s]:100*n+"%"})}else if("circle"===s){const e=t.querySelector('circle[aa-accordion-progress="circle"]');if(e){const t=parseFloat(e.getAttribute("r"))||25,a=2*Math.PI*t;e.style.strokeDashoffset=a}}else gsap.set(o,{[s]:"0%"})})}(e.toggles,i,t,s)}}),A=ScrollTrigger.create({trigger:t,start:i,end:`+=${n}`,pin:!0,pinSpacing:!0,scrub:o&&parseFloat(o)||!0,animation:d}),p=a.handleToggle.bind(a);a.handleToggle=t=>{const a=e.toggles.indexOf(t);if(-1===a)return p(t);if(!A)return;const i=n/s,r=.05*i,o=A.start+a*i+r;window.lenis?window.lenis.scrollTo(o,{duration:1.2,offset:0,easing:t=>t<.5?8*t*t*t*t:1-Math.pow(-2*t+2,4)/2}):gsap.ScrollToPlugin?gsap.to(window,{duration:1.2,scrollTo:{y:o,autoKill:!1},ease:"power2.inOut"}):window.scrollTo({top:o,behavior:"smooth"})}}(t,u,g,i):"autoplay"===c&&function(t,e,a){let i=null,r=0,o=null,s=null;const c=t.querySelector("[aa-accordion-initial]");if(c){o=c,r=e.toggles.indexOf(c);const t=c.getAttribute("aa-accordion-toggle"),a=e.getElementData(t);a&&(e.setAccordionStatus(a,c,"active"),a.content?c.setAttribute("aria-expanded","true"):c.setAttribute("aria-selected","true"),a.visual&&a.visual.setAttribute("aria-hidden","false"),a.content&&(gsap.set(a.content,{gridTemplateRows:"1fr"}),e.useWrapperPattern||a.content.setAttribute("aa-accordion-status","active"),n(a.content,"play")),a.visual&&(a.visual.setAttribute("aa-accordion-status","active"),gsap.set(a.visual,{visibility:"visible"}),n(a.visual,"play")))}function l(n){if(n>=e.toggles.length)return;const c=e.toggles[n],u=c.getAttribute("aa-accordion-toggle"),g=e.getElementData(u);if(!g)return;if(o&&o!==c){const t=o.getAttribute("aa-accordion-toggle"),i=e.getElementData(t);i&&a.closeAccordion(o,i)}e.isAccordionActive(g,c)||(a.openAccordion(c,g),o=c);const d=parseFloat(t.getAttribute("aa-duration"))||5;r=n,function(t,a){i&&i.kill();const r=e.toggles[t],o=e.getElementData(r.getAttribute("aa-accordion-toggle"));if(!o)return;const n=r.querySelector('circle[aa-accordion-progress="circle"]');if(n){const r=n.getAttribute("aa-ease")||"power1.inOut",o=parseFloat(n.getAttribute("r"))||25,c=2*Math.PI*o;n.style.strokeDasharray=c,n.style.strokeDashoffset=c,i=gsap.to(n,{strokeDashoffset:0,duration:a,ease:r,onComplete:()=>{s?.isActive&&l((t+1)%e.toggles.length)},paused:!s?.isActive})}else if(o.progressElement){const r=o.progressElement.getAttribute("aa-accordion-progress")||"width",n=o.progressElement.getAttribute("aa-ease")||"power1.inOut";"circle"===r?i=gsap.delayedCall(a,()=>{s?.isActive&&l((t+1)%e.toggles.length)}):(gsap.set(o.progressElement,{[r]:0}),i=gsap.to(o.progressElement,{[r]:"100%",duration:a,ease:n,onComplete:()=>{s?.isActive&&l((t+1)%e.toggles.length)},paused:!s?.isActive}))}else i=gsap.delayedCall(a,()=>{s?.isActive&&l((t+1)%e.toggles.length)});s?.isActive&&i.play()}(n,d)}a.handleToggle.bind(a),a.handleToggle=n=>{const c=n.getAttribute("aa-accordion-toggle"),u=e.getElementData(c);if(!u)return;const g=e.isAccordionActive(u,n),d=t.querySelector("[aa-accordion-initial]");if((!i?.isActive()||e.toggles.indexOf(n)!==r)&&(i&&(i.kill(),i=null),(!g||!d)&&(g?a.closeAccordion(n,u):(e.toggles.forEach(t=>{if(t!==n){const i=t.getAttribute("aa-accordion-toggle"),r=e.getElementData(i);e.isAccordionActive(r,t)&&r&&a.closeAccordion(t,r)}}),a.openAccordion(n,u),o=n),s?.isActive))){const t=e.toggles.indexOf(n);-1!==t&&l(t)}},window.ScrollTrigger&&(s=ScrollTrigger.create({trigger:t,start:"top bottom",end:"bottom top",toggleActions:"play pause resume pause",onEnter:()=>{i||gsap.delayedCall(.1,()=>{l(r)})},onToggle:({isActive:t})=>{i&&(t?i.play():i.pause())}}),s.isActive&&gsap.delayedCall(.2,()=>{l(r)}))}(t,u,g,0,0,i)}function l(t,e,a,i=1){return{accordion:(t,r=null)=>{c(t,e,a,i,r)}}}}}]);