alrdy-animate
Version:
A library to handle animations on scroll with GSAP integration.
1 lines • 15 kB
JavaScript
;(this.webpackChunkAlrdyAnimate=this.webpackChunkAlrdyAnimate||[]).push([[704],{280:(e,t,r)=>{function n(e){return n="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},n(e)}function o(e){return function(e){if(Array.isArray(e))return a(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 a(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)?a(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 a(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=Array(t);r<t;r++)n[r]=e[r];return n}function i(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function s(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){u(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function u(e,t,r){return(t=function(e){var t=function(e){if("object"!=n(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,"string");if("object"!=n(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==n(t)?t:t+""}(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function l(e,t){var r=new Set;function n(r,n){var o;return r=e.utils.toArray(r),n=n||{},e.context((function(){var a,i,s,u=n.onChange,l=0,c=e.timeline({repeat:n.repeat,onUpdate:u&&function(){var e=c.closestIndex();l!==e&&(l=e,u(r[e],e))},paused:n.paused,defaults:{ease:"none"},onReverseComplete:function(){return c.totalTime(c.rawTime()+100*c.duration())}}),d=r.length,p=r[0].offsetTop,f=[],v=[],g=[],m=[],h=0,b=n.center,y=100*(n.speed||1),w=!1===n.snap?function(e){return e}:e.utils.snap(n.snap||1),A=0,x=!0===b?r[0].parentNode:e.utils.toArray(b)[0]||r[0].parentNode,T=function(){var t,o=x.getBoundingClientRect();p=r[0].offsetTop,r.forEach((function(r,n){v[n]=parseFloat(e.getProperty(r,"height","px")),m[n]=w(parseFloat(e.getProperty(r,"y","px"))/v[n]*100+e.getProperty(r,"yPercent")),t=r.getBoundingClientRect(),g[n]=t.top-(n?o.bottom:o.top),o=t})),e.set(r,{yPercent:function(e){return m[e]}}),a=r[d-1].offsetTop+m[d-1]/100*v[d-1]-p+r[d-1].offsetHeight*e.getProperty(r[d-1],"scaleY")+(parseFloat(n.paddingBottom)||0)},E=function(){A=b?c.duration()*(x.offsetHeight/2)/a:0,b&&f.forEach((function(e,t){f[t]=i(c.labels["label"+t]+c.duration()*v[t]/2/a-A)}))},P=function(e,t,r){for(var n,o=e.length,a=1e10,i=0;o--;)(n=Math.abs(e[o]-t))>r/2&&(n=r-n),n<a&&(a=n,i=o);return i},C=function(){var t,n,o,s,u;for(c.clear(),t=0;t<d;t++)n=r[t],o=m[t]/100*v[t],u=(s=n.offsetTop+o-p+g[0])+v[t]*e.getProperty(n,"scaleY"),c.to(n,{yPercent:w((o-u)/v[t]*100),duration:u/y},0).fromTo(n,{yPercent:w((o-u+a)/v[t]*100)},{yPercent:m[t],duration:(o-u+a-o)/y,immediateRender:!1},u/y).add("label"+t,s/y),f[t]=s/y;i=e.utils.wrap(0,c.duration())},S=function(){var e=n,t=e.enterAnimation,o=e.leaveAnimation,a=c.duration()/r.length;r.forEach((function(e,r){var n=t&&t(e,a,r),s=n&&c.duration()-i(f[r]-Math.min(a,n.duration()))<a-.05;n&&c.add(n,s?0:i(f[r]-n.duration())),n=o&&o(e,a,r),s=f[r]===c.duration(),n&&n.duration()>a&&n.duration(a),n&&c.add(n,s?0:f[r])}))};function _(t,r){r=r||{},Math.abs(t-h)>d/2&&(t+=t>h?-d:d);var n=e.utils.wrap(0,d,t),o=f[n];return o>c.time()!=t>h&&(o+=c.duration()*(t>h?1:-1)),(o<0||o>c.duration())&&(r.modifiers={time:i}),h=n,r.overwrite=!0,e.killTweensOf(s),0===r.duration?c.time(i(o)):c.tweenTo(o,r)}if(e.set(r,{y:0}),T(),C(),E(),S(),c.elements=r,c.next=function(e){return _(h+1,e)},c.previous=function(e){return _(h-1,e)},c.current=function(){return h},c.toIndex=function(e,t){return _(e,t)},c.closestIndex=function(e){var t=P(f,c.time(),c.duration());return e&&(h=t),t},c.times=f,c.progress(1,!0).progress(0,!0),n.reversed&&(c.vars.onReverseComplete(),c.reverse()),n.draggable&&"function"==typeof t){s=document.createElement("div");var L,O,k,I,B,N,R=e.utils.wrap(0,1),j=function(){return c.progress(R(O+(k.startY-k.y)*L))},M=function(){return c.closestIndex(!0)};k=t.create(s,{trigger:r[0].parentNode,type:"y",onPressInit:function(){var t,r,n=this.y;e.killTweensOf(c),I=!c.paused(),c.pause(),O=c.progress(),r=c.progress(),c.progress(0,!0),T(),t&&C(),E(),S(),t&&c.draggable?c.time(f[h],!0):c.progress(r,!0),N=O/-(L=1/a)-n,e.set(s,{y:O/-L})},onDrag:j,onThrowUpdate:j,overshootTolerance:0,inertia:!0,throwResistance:2e3,maxDuration:3,snap:function(e){if(Math.abs(O/-L-this.y)<10)return B+N;var t=-e*L*c.duration(),r=i(t),n=f[P(f,r,c.duration())]-r;return Math.abs(n)>c.duration()/2&&(n+=n<0?c.duration():-c.duration()),B=(t+n)/c.duration()/-L},onRelease:function(){M(),k.isThrowing,n.reversed&&c.reversed(!0)},onThrowComplete:function(){M(),I&&c.play(),n.reversed&&c.reversed(!0)}})[0],c.draggable=k}c.closestIndex(!0),n.center&&_(0,{duration:0}),l=h,u&&u(r[h],h),o=c})),o}function a(a,i,u,l,c){var d=e.utils.toArray("[aa-slider-item]",a);if(0!==d.length){var p=function(e,t,r){var n={speed:r,repeat:-1,center:!1,paused:!0,snap:!0},o=e.querySelector("[aa-slider-item]"),a=parseFloat(window.getComputedStyle(o.parentElement).gap)||0;return t.includes("vertical")?n.paddingBottom=a:n.paddingRight=a,t.includes("draggable")&&(n.draggable=!0),t.includes("loop")&&(n.paused=!1),t.includes("reverse")&&(n.reversed=!0),t.includes("center")&&(n.center=!0),n}(a,i,u);!function(e,t,r){var n=t.length,a=e.querySelector("[aa-slider-next]"),i=e.querySelector("[aa-slider-prev]"),s=e.querySelector("[aa-slider-current]"),u=e.querySelector("[aa-slider-total]"),l=e.id?[].concat(o(e.querySelectorAll("[aa-slider-button]")),o(document.querySelectorAll('[aa-slider-button][aa-slider-target="'.concat(e.id,'"]')))):e.querySelectorAll("[aa-slider-button]");if(e.setAttribute("role","region"),e.setAttribute("aria-roledescription","carousel"),t.forEach((function(t,r){t.setAttribute("role","tabpanel"),t.setAttribute("aria-roledescription","slide"),t.setAttribute("aria-label","Slide ".concat(r+1," of ").concat(n)),t.setAttribute("id","".concat(e.id||"slider","-slide-").concat(r))})),a&&(a.setAttribute("aria-label","Next slide"),a.setAttribute("role","button")),i&&(i.setAttribute("aria-label","Previous slide"),i.setAttribute("role","button")),l.length>0){var c=l[0].parentElement;c&&(c.setAttribute("role","tablist"),c.setAttribute("aria-label","Slide navigation")),l.forEach((function(t,r){t.setAttribute("role","tab"),t.setAttribute("aria-label","Go to slide ".concat(r+1)),t.setAttribute("aria-controls","".concat(e.id||"slider","-slide-").concat(r)),t.setAttribute("tabindex","0")}))}u&&(u.textContent=n<10?"0".concat(n):n),r.onChange=function(e,r){var o=(r%n+n)%n;t.forEach((function(e,t){e.classList.toggle("is-active",t===o),e.setAttribute("aria-hidden",t!==o?"true":"false")})),l.length>0&&l.forEach((function(e,t){e.classList.toggle("is-active",t===o),e.setAttribute("aria-selected",t===o?"true":"false")})),s&&(s.textContent=o+1<10?"0".concat(o+1):o+1)},e._sliderNav={nextButton:a,prevButton:i,currentElement:s,totalElement:u,slideButtons:l}}(a,d,p);var f=i.includes("vertical")?n(d,p):function(r,n){var o;return r=e.utils.toArray(r),n=n||{},e.context((function(){var a,i,s,u=n.onChange,l=0,c=e.timeline({repeat:n.repeat,onUpdate:u&&function(){var e=c.closestIndex();l!==e&&(l=e,u(r[e],e))},paused:n.paused,defaults:{ease:"none"},onReverseComplete:function(){return c.totalTime(c.rawTime()+100*c.duration())}}),d=r.length,p=r[0].offsetLeft,f=[],v=[],g=[],m=[],h=0,b=!1,y=n.center,w=100*(n.speed||1),A=!1===n.snap?function(e){return e}:e.utils.snap(n.snap||1),x=0,T=!0===y?r[0].parentNode:e.utils.toArray(y)[0]||r[0].parentNode,E=function(){var t,o=T.getBoundingClientRect();r.forEach((function(r,n){v[n]=parseFloat(e.getProperty(r,"width","px")),m[n]=A(parseFloat(e.getProperty(r,"x","px"))/v[n]*100+e.getProperty(r,"xPercent")),t=r.getBoundingClientRect(),g[n]=t.left-(n?o.right:o.left),o=t})),e.set(r,{xPercent:function(e){return m[e]}}),a=r[d-1].offsetLeft+m[d-1]/100*v[d-1]-p+r[d-1].offsetWidth*e.getProperty(r[d-1],"scaleX")+(parseFloat(n.paddingRight)||0)},P=function(){x=y?c.duration()*(T.offsetWidth/2)/a:0,y&&f.forEach((function(e,t){f[t]=i(c.labels["label"+t]+c.duration()*v[t]/2/a-x)}))},C=function(e,t,r){for(var n,o=e.length,a=1e10,i=0;o--;)(n=Math.abs(e[o]-t))>r/2&&(n=r-n),n<a&&(a=n,i=o);return i},S=function(){var t,n,o,s,u;for(c.clear(),t=0;t<d;t++)n=r[t],o=m[t]/100*v[t],u=(s=n.offsetLeft+o-p+g[0])+v[t]*e.getProperty(n,"scaleX"),c.to(n,{xPercent:A((o-u)/v[t]*100),duration:u/w},0).fromTo(n,{xPercent:A((o-u+a)/v[t]*100)},{xPercent:m[t],duration:(o-u+a-o)/w,immediateRender:!1},u/w).add("label"+t,s/w),f[t]=s/w;i=e.utils.wrap(0,c.duration())},_=function(e){var t=c.progress();c.progress(0,!0),E(),e&&S(),P(),e&&c.draggable?c.time(f[h],!0):c.progress(t,!0)};function L(t,r){r=r||{},Math.abs(t-h)>d/2&&(t+=t>h?-d:d);var n=e.utils.wrap(0,d,t),o=f[n];return o>c.time()!=t>h&&t!==h&&(o+=c.duration()*(t>h?1:-1)),(o<0||o>c.duration())&&(r.modifiers={time:i}),h=n,r.overwrite=!0,e.killTweensOf(s),0===r.duration?c.time(i(o)):c.tweenTo(o,r)}if(e.set(r,{x:0}),E(),S(),P(),c.toIndex=function(e,t){return L(e,t)},c.closestIndex=function(e){var t=C(f,c.time(),c.duration());return e&&(h=t,b=!1),t},c.current=function(){return b?c.closestIndex(!0):h},c.next=function(e){return L(c.current()+1,e)},c.previous=function(e){return L(c.current()-1,e)},c.times=f,c.progress(1,!0).progress(0,!0),n.reversed&&(c.vars.onReverseComplete(),c.reverse()),n.draggable&&"function"==typeof t){s=document.createElement("div");var O,k,I,B,N,R,j=e.utils.wrap(0,1),M=!1,D=function(){return c.progress(j(k+(I.startX-I.x)*O))},q=function(){return c.closestIndex(!0)};I=t.create(s,{trigger:r[0].parentNode,type:"x",onPressInit:function(){this.pointerY,this.pointerX;var t=this.x;e.killTweensOf(c),R=!c.paused(),c.pause(),k=c.progress(),_(),N=k/-(O=1/a)-t,e.set(s,{x:k/-O})},onDrag:D,onThrowUpdate:D,overshootTolerance:0,inertia:!0,maxDuration:1.5,minDuration:.3,snap:function(e){if(Math.abs(k/-O-this.x)<10)return B+N;var t=-e*O*c.duration(),r=i(t),n=f[C(f,r,c.duration())]-r;return Math.abs(n)>c.duration()/2&&(n+=n<0?c.duration():-c.duration()),B=(t+n)/c.duration()/-O},onRelease:function(){q(),I.isThrowing&&(b=!0),n.reversed&&c.reversed(!0)},onThrowComplete:function(){q(),R&&c.play(),n.reversed&&c.reversed(!0)}})[0];var F=r[0].parentNode,X=0,Y=0,H=function(e){X=e.touches[0].clientY,Y=e.touches[0].clientX},U=function(e){M||(Math.abs(e.touches[0].clientY-X)>Math.abs(e.touches[0].clientX-Y)?I.disable():M=!0)},W=function(){M||I.enable(),M=!1};F.addEventListener("touchstart",H,{passive:!1}),F.addEventListener("touchmove",U,{passive:!1}),F.addEventListener("touchend",W),c.touchCleanup=function(){F.removeEventListener("touchstart",H),F.removeEventListener("touchmove",U),F.removeEventListener("touchend",W)},c.draggable=I}c.closestIndex(!0),n.center&&(L(0,{duration:0}),_(!0)),l=h,u&&u(r[h],h),o=c})),o}(d,p);return a._loop=f,r.add(a),function(t,r,n,o,a,i,s){if(t._sliderNav){var u=t._sliderNav,l=u.nextButton,c=u.prevButton,d=u.slideButtons,p=function(t){n[t]({ease:a,duration:o,onComplete:function(){s.includes("loop")&&e.delayedCall(1,(function(){n.resume()}))}})};l&&l.addEventListener("click",(function(){return p("next")})),c&&c.addEventListener("click",(function(){return p("previous")})),(null==d?void 0:d.length)>0&&d.forEach((function(t,r){t.addEventListener("click",(function(){n.toIndex(r,{ease:a,duration:o,onComplete:function(){s.includes("loop")&&e.delayedCall(1,(function(){return n.resume()}))}})}))}))}s.includes("loop")||s.includes("snap")||window.matchMedia("(hover: none)").matches||r.forEach((function(e,r){e.addEventListener("click",(function(){t._loop.toIndex(r,{ease:a,duration:o})}))}))}(a,d,f,u,l,0,i),i.includes("snap")&&function(t,r,n,o,a,i){var s,u=function(){if(!s){var t=function(){var u=n.includes("reverse")?"previous":"next";r[u]({duration:o,ease:a}),s=e.delayedCall(i,t)};s=e.delayedCall(i,t)}},l=function(){s&&(s.kill(),s=null)};r.startAutoplay=u,r.stopAutoplay=l,window.matchMedia("(hover: none)").matches||(t.addEventListener("mouseenter",l),t.addEventListener("mouseleave",u),r._removeHoverListeners=function(){t.removeEventListener("mouseenter",l),t.removeEventListener("mouseleave",u)}),r.scrollTrigger=ScrollTrigger.create({trigger:t,start:"top bottom",end:"bottom top",onEnter:u,onLeave:l,onEnterBack:u,onLeaveBack:l}),r.pause(),u()}(a,f,i,u,l,c),i.includes("draggable")&&function(e,t,r){var n={onPressInit:t.draggable.vars.onPressInit,onRelease:t.draggable.vars.onRelease,onThrowComplete:t.draggable.vars.onThrowComplete};if(r.includes("draggable")){var o={onPressInit:function(){n.onPressInit&&n.onPressInit.call(this),t.stopAutoplay&&t.stopAutoplay()},onDragStart:function(){t.pause(),t._isThrowing=!1},onDragEnd:function(){this.tween&&this.tween.isActive()&&(t._isThrowing=!0)},onThrowComplete:function(){n.onThrowComplete&&n.onThrowComplete.call(this),t._isThrowing=!1,t.startAutoplay&&r.includes("snap")?e.matches(":hover")&&!window.matchMedia("(hover: none)").matches||t.startAutoplay():r.includes("loop")&&t.play()}};t.draggable.vars=s(s({},t.draggable.vars),o),t.draggable.enable()}}(a,f,i),i.includes("loop")&&(f.scrollTrigger=ScrollTrigger.create({trigger:a,start:"top bottom",end:"bottom top",onEnter:function(){return f.play()},onLeave:function(){return f.pause()},onEnterBack:function(){return f.play()},onLeaveBack:function(){return f.pause()}})),f}console.warn("No items found with [aa-slider-item] attribute.")}return{slider:function(e,t,r,n,o){return a(e,t,r,n,o)},cleanupLoops:function(){r.forEach((function(t){if(t._loop){t._loop.stopAutoplay&&t._loop.stopAutoplay(),t._loop._removeHoverListeners&&t._loop._removeHoverListeners(),t._loop.draggable&&t._loop.draggable.kill(),t._loop.scrollTrigger&&t._loop.scrollTrigger.kill();var r=t.querySelectorAll("[aa-slider-item]");if(e.killTweensOf(r),e.killTweensOf(t._loop.moveToNext),t._loop.kill(),e.set(r,{clearProps:"all"}),r.forEach((function(e){return e.classList.remove("active")})),t._sliderNav){var n=t._sliderNav,o=n.nextButton,a=n.prevButton;o&&o.replaceWith(o.cloneNode(!0)),a&&a.replaceWith(a.cloneNode(!0)),t._sliderNav=null}t._loop&&"function"==typeof t._loop.touchCleanup&&t._loop.touchCleanup(),t._loop=null}})),r.clear()}}}r.r(t),r.d(t,{createSliderAnimations:()=>l})}}]);