alrdy-animate
Version:
A library to handle animations on scroll with GSAP integration.
1 lines • 18.5 kB
JavaScript
"use strict";(this.webpackChunkAlrdyAnimate=this.webpackChunkAlrdyAnimate||[]).push([[332],{686(t,e,i){function s(t,e,i,s={}){const o=new t({lerp:.12,orientation:"vertical",gestureOrientation:"vertical",smoothWheel:!0,wheelMultiplier:1,touchMultiplier:2,infinite:!1,...s});if(e&&i)o.on("scroll",i.update),e.ticker.add(t=>{o.raf(1e3*t)}),e.ticker.lagSmoothing(0);else{function n(t){o.raf(t),requestAnimationFrame(n)}requestAnimationFrame(n)}return document.querySelectorAll("[aa-scroll-target]").forEach(t=>{t.addEventListener("click",function(t){t.preventDefault();const e=this.getAttribute("aa-scroll-target"),i=parseFloat(this.getAttribute("aa-duration"))||1.2,s=parseFloat(this.getAttribute("aa-distance"))||0;o.scrollTo(e,{offset:s,duration:i,easing:t=>t<.5?8*t*t*t*t:1-Math.pow(-2*t+2,4)/2})})}),o}i.r(e),i.d(e,{initializeSmoothScroll:()=>s})},66(t,e,i){i.r(e),i.d(e,{default:()=>u});var s="1.3.23";function o(t,e,i){return Math.max(t,Math.min(e,i))}var n=class{isRunning=!1;value=0;from=0;to=0;currentTime=0;lerp;duration;easing;onUpdate;advance(t){if(!this.isRunning)return;let e=!1;if(this.duration&&this.easing){this.currentTime+=t;const i=o(0,this.currentTime/this.duration,1);e=i>=1;const s=e?1:this.easing(i);this.value=this.from+(this.to-this.from)*s}else this.lerp?(this.value=function(t,e,i,s){return function(t,e,i){return(1-i)*t+i*e}(t,e,1-Math.exp(-i*s))}(this.value,this.to,60*this.lerp,t),Math.round(this.value)===Math.round(this.to)&&(this.value=this.to,e=!0)):(this.value=this.to,e=!0);e&&this.stop(),this.onUpdate?.(this.value,e)}stop(){this.isRunning=!1}fromTo(t,e,{lerp:i,duration:s,easing:o,onStart:n,onUpdate:r}){this.from=this.value=t,this.to=e,this.lerp=i,this.duration=s,this.easing=o,this.currentTime=0,this.isRunning=!0,n?.(),this.onUpdate=r}},r=class{width=0;height=0;scrollHeight=0;scrollWidth=0;debouncedResize;wrapperResizeObserver;contentResizeObserver;constructor(t,e,{autoResize:i=!0,debounce:s=250}={}){this.wrapper=t,this.content=e,i&&(this.debouncedResize=function(t,e){let i;return function(...s){clearTimeout(i),i=setTimeout(()=>{i=void 0,t.apply(this,s)},e)}}(this.resize,s),this.wrapper instanceof Window?window.addEventListener("resize",this.debouncedResize):(this.wrapperResizeObserver=new ResizeObserver(this.debouncedResize),this.wrapperResizeObserver.observe(this.wrapper)),this.contentResizeObserver=new ResizeObserver(this.debouncedResize),this.contentResizeObserver.observe(this.content)),this.resize()}destroy(){this.wrapperResizeObserver?.disconnect(),this.contentResizeObserver?.disconnect(),this.wrapper===window&&this.debouncedResize&&window.removeEventListener("resize",this.debouncedResize)}resize=()=>{this.onWrapperResize(),this.onContentResize()};onWrapperResize=()=>{this.wrapper instanceof Window?(this.width=window.innerWidth,this.height=window.innerHeight):(this.width=this.wrapper.clientWidth,this.height=this.wrapper.clientHeight)};onContentResize=()=>{this.wrapper instanceof Window?(this.scrollHeight=this.content.scrollHeight,this.scrollWidth=this.content.scrollWidth):(this.scrollHeight=this.wrapper.scrollHeight,this.scrollWidth=this.wrapper.scrollWidth)};get limit(){return{x:this.scrollWidth-this.width,y:this.scrollHeight-this.height}}},l=class{events={};emit(t,...e){const i=this.events[t]||[];for(let t=0,s=i.length;t<s;t++)i[t]?.(...e)}on(t,e){return this.events[t]?this.events[t].push(e):this.events[t]=[e],()=>{this.events[t]=this.events[t]?.filter(t=>e!==t)}}off(t,e){this.events[t]=this.events[t]?.filter(t=>e!==t)}destroy(){this.events={}}};const h=100/6,a={passive:!1};function c(t,e){return 1===t?h:2===t?e:1}var p=class{touchStart={x:0,y:0};lastDelta={x:0,y:0};window={width:0,height:0};emitter=new l;constructor(t,e={wheelMultiplier:1,touchMultiplier:1}){this.element=t,this.options=e,window.addEventListener("resize",this.onWindowResize),this.onWindowResize(),this.element.addEventListener("wheel",this.onWheel,a),this.element.addEventListener("touchstart",this.onTouchStart,a),this.element.addEventListener("touchmove",this.onTouchMove,a),this.element.addEventListener("touchend",this.onTouchEnd,a)}on(t,e){return this.emitter.on(t,e)}destroy(){this.emitter.destroy(),window.removeEventListener("resize",this.onWindowResize),this.element.removeEventListener("wheel",this.onWheel,a),this.element.removeEventListener("touchstart",this.onTouchStart,a),this.element.removeEventListener("touchmove",this.onTouchMove,a),this.element.removeEventListener("touchend",this.onTouchEnd,a)}onTouchStart=t=>{const{clientX:e,clientY:i}=t.targetTouches?t.targetTouches[0]:t;this.touchStart.x=e,this.touchStart.y=i,this.lastDelta={x:0,y:0},this.emitter.emit("scroll",{deltaX:0,deltaY:0,event:t})};onTouchMove=t=>{const{clientX:e,clientY:i}=t.targetTouches?t.targetTouches[0]:t,s=-(e-this.touchStart.x)*this.options.touchMultiplier,o=-(i-this.touchStart.y)*this.options.touchMultiplier;this.touchStart.x=e,this.touchStart.y=i,this.lastDelta={x:s,y:o},this.emitter.emit("scroll",{deltaX:s,deltaY:o,event:t})};onTouchEnd=t=>{this.emitter.emit("scroll",{deltaX:this.lastDelta.x,deltaY:this.lastDelta.y,event:t})};onWheel=t=>{let{deltaX:e,deltaY:i,deltaMode:s}=t;e*=c(s,this.window.width),i*=c(s,this.window.height),e*=this.options.wheelMultiplier,i*=this.options.wheelMultiplier,this.emitter.emit("scroll",{deltaX:e,deltaY:i,event:t})};onWindowResize=()=>{this.window={width:window.innerWidth,height:window.innerHeight}}};const d=t=>Math.min(1,1.001-2**(-10*t));var u=class{_isScrolling=!1;_isStopped=!1;_isLocked=!1;_preventNextNativeScrollEvent=!1;_resetVelocityTimeout=null;_rafId=null;isTouching;time=0;userData={};lastVelocity=0;velocity=0;direction=0;options;targetScroll;animatedScroll;animate=new n;emitter=new l;dimensions;virtualScroll;constructor({wrapper:t=window,content:e=document.documentElement,eventsTarget:i=t,smoothWheel:o=!0,syncTouch:n=!1,syncTouchLerp:l=.075,touchInertiaExponent:h=1.7,duration:a,easing:c,lerp:u=.1,infinite:m=!1,orientation:v="vertical",gestureOrientation:g=("horizontal"===v?"both":"vertical"),touchMultiplier:w=1,wheelMultiplier:f=1,autoResize:S=!0,prevent:y,virtualScroll:E,overscroll:b=!0,autoRaf:T=!1,anchors:z=!1,autoToggle:L=!1,allowNestedScroll:N=!1,__experimental__naiveDimensions:M=!1,naiveDimensions:R=M,stopInertiaOnNavigate:O=!1}={}){window.lenisVersion=s,window.lenis||(window.lenis={}),window.lenis.version=s,"horizontal"===v&&(window.lenis.horizontal=!0),!0===n&&(window.lenis.touch=!0),t&&t!==document.documentElement||(t=window),"number"==typeof a&&"function"!=typeof c?c=d:"function"==typeof c&&"number"!=typeof a&&(a=1),this.options={wrapper:t,content:e,eventsTarget:i,smoothWheel:o,syncTouch:n,syncTouchLerp:l,touchInertiaExponent:h,duration:a,easing:c,lerp:u,infinite:m,gestureOrientation:g,orientation:v,touchMultiplier:w,wheelMultiplier:f,autoResize:S,prevent:y,virtualScroll:E,overscroll:b,autoRaf:T,anchors:z,autoToggle:L,allowNestedScroll:N,naiveDimensions:R,stopInertiaOnNavigate:O},this.dimensions=new r(t,e,{autoResize:S}),this.updateClassName(),this.targetScroll=this.animatedScroll=this.actualScroll,this.options.wrapper.addEventListener("scroll",this.onNativeScroll),this.options.wrapper.addEventListener("scrollend",this.onScrollEnd,{capture:!0}),(this.options.anchors||this.options.stopInertiaOnNavigate)&&this.options.wrapper.addEventListener("click",this.onClick),this.options.wrapper.addEventListener("pointerdown",this.onPointerDown),this.virtualScroll=new p(i,{touchMultiplier:w,wheelMultiplier:f}),this.virtualScroll.on("scroll",this.onVirtualScroll),this.options.autoToggle&&(this.checkOverflow(),this.rootElement.addEventListener("transitionend",this.onTransitionEnd)),this.options.autoRaf&&(this._rafId=requestAnimationFrame(this.raf))}destroy(){this.emitter.destroy(),this.options.wrapper.removeEventListener("scroll",this.onNativeScroll),this.options.wrapper.removeEventListener("scrollend",this.onScrollEnd,{capture:!0}),this.options.wrapper.removeEventListener("pointerdown",this.onPointerDown),(this.options.anchors||this.options.stopInertiaOnNavigate)&&this.options.wrapper.removeEventListener("click",this.onClick),this.virtualScroll.destroy(),this.dimensions.destroy(),this.cleanUpClassName(),this._rafId&&cancelAnimationFrame(this._rafId)}on(t,e){return this.emitter.on(t,e)}off(t,e){return this.emitter.off(t,e)}onScrollEnd=t=>{t instanceof CustomEvent||"smooth"!==this.isScrolling&&!1!==this.isScrolling||t.stopPropagation()};dispatchScrollendEvent=()=>{this.options.wrapper.dispatchEvent(new CustomEvent("scrollend",{bubbles:this.options.wrapper===window,detail:{lenisScrollEnd:!0}}))};get overflow(){const t=this.isHorizontal?"overflow-x":"overflow-y";return getComputedStyle(this.rootElement)[t]}checkOverflow(){["hidden","clip"].includes(this.overflow)?this.internalStop():this.internalStart()}onTransitionEnd=t=>{t.propertyName?.includes("overflow")&&t.target===this.rootElement&&this.checkOverflow()};setScroll(t){this.isHorizontal?this.options.wrapper.scrollTo({left:t,behavior:"instant"}):this.options.wrapper.scrollTo({top:t,behavior:"instant"})}onClick=t=>{const e=t.composedPath().filter(t=>t instanceof HTMLAnchorElement&&t.href).map(t=>new URL(t.href)),i=new URL(window.location.href);if(this.options.anchors){const t=e.find(t=>i.host===t.host&&i.pathname===t.pathname&&t.hash);if(t){const e="object"==typeof this.options.anchors&&this.options.anchors?this.options.anchors:void 0,i=`#${t.hash.split("#")[1]}`;return void this.scrollTo(i,e)}}this.options.stopInertiaOnNavigate&&e.some(t=>i.host===t.host&&i.pathname!==t.pathname)&&this.reset()};onPointerDown=t=>{1===t.button&&this.reset()};onVirtualScroll=t=>{if("function"==typeof this.options.virtualScroll&&!1===this.options.virtualScroll(t))return;const{deltaX:e,deltaY:i,event:s}=t;if(this.emitter.emit("virtual-scroll",{deltaX:e,deltaY:i,event:s}),s.ctrlKey)return;if(s.lenisStopPropagation)return;const o=s.type.includes("touch"),n=s.type.includes("wheel");this.isTouching="touchstart"===s.type||"touchmove"===s.type;const r=0===e&&0===i;if(this.options.syncTouch&&o&&"touchstart"===s.type&&r&&!this.isStopped&&!this.isLocked)return void this.reset();const l="vertical"===this.options.gestureOrientation&&0===i||"horizontal"===this.options.gestureOrientation&&0===e;if(r||l)return;let h=s.composedPath();h=h.slice(0,h.indexOf(this.rootElement));const a=this.options.prevent,c=Math.abs(e)>=Math.abs(i)?"horizontal":"vertical";if(h.find(t=>t instanceof HTMLElement&&("function"==typeof a&&a?.(t)||t.hasAttribute?.("data-lenis-prevent")||"vertical"===c&&t.hasAttribute?.("data-lenis-prevent-vertical")||"horizontal"===c&&t.hasAttribute?.("data-lenis-prevent-horizontal")||o&&t.hasAttribute?.("data-lenis-prevent-touch")||n&&t.hasAttribute?.("data-lenis-prevent-wheel")||this.options.allowNestedScroll&&this.hasNestedScroll(t,{deltaX:e,deltaY:i}))))return;if(this.isStopped||this.isLocked)return void(s.cancelable&&s.preventDefault());if(!(this.options.syncTouch&&o||this.options.smoothWheel&&n))return this.isScrolling="native",this.animate.stop(),void(s.lenisStopPropagation=!0);let p=i;"both"===this.options.gestureOrientation?p=Math.abs(i)>Math.abs(e)?i:e:"horizontal"===this.options.gestureOrientation&&(p=e),(!this.options.overscroll||this.options.infinite||this.options.wrapper!==window&&this.limit>0&&(this.animatedScroll>0&&this.animatedScroll<this.limit||0===this.animatedScroll&&i>0||this.animatedScroll===this.limit&&i<0))&&(s.lenisStopPropagation=!0),s.cancelable&&s.preventDefault();const d=o&&this.options.syncTouch,u=o&&"touchend"===s.type;u&&(p=Math.sign(p)*Math.abs(this.velocity)**this.options.touchInertiaExponent),this.scrollTo(this.targetScroll+p,{programmatic:!1,...d?{lerp:u?this.options.syncTouchLerp:1}:{lerp:this.options.lerp,duration:this.options.duration,easing:this.options.easing}})};resize(){this.dimensions.resize(),this.animatedScroll=this.targetScroll=this.actualScroll,this.emit()}emit(){this.emitter.emit("scroll",this)}onNativeScroll=()=>{if(null!==this._resetVelocityTimeout&&(clearTimeout(this._resetVelocityTimeout),this._resetVelocityTimeout=null),this._preventNextNativeScrollEvent)this._preventNextNativeScrollEvent=!1;else if(!1===this.isScrolling||"native"===this.isScrolling){const t=this.animatedScroll;this.animatedScroll=this.targetScroll=this.actualScroll,this.lastVelocity=this.velocity,this.velocity=this.animatedScroll-t,this.direction=Math.sign(this.animatedScroll-t),this.isStopped||(this.isScrolling="native"),this.emit(),0!==this.velocity&&(this._resetVelocityTimeout=setTimeout(()=>{this.lastVelocity=this.velocity,this.velocity=0,this.isScrolling=!1,this.emit()},400))}};reset(){this.isLocked=!1,this.isScrolling=!1,this.animatedScroll=this.targetScroll=this.actualScroll,this.lastVelocity=this.velocity=0,this.animate.stop()}start(){this.isStopped&&(this.options.autoToggle?this.rootElement.style.removeProperty("overflow"):this.internalStart())}internalStart(){this.isStopped&&(this.reset(),this.isStopped=!1,this.emit())}stop(){this.isStopped||(this.options.autoToggle?this.rootElement.style.setProperty("overflow","clip"):this.internalStop())}internalStop(){this.isStopped||(this.reset(),this.isStopped=!0,this.emit())}raf=t=>{const e=t-(this.time||t);this.time=t,this.animate.advance(.001*e),this.options.autoRaf&&(this._rafId=requestAnimationFrame(this.raf))};scrollTo(t,{offset:e=0,immediate:i=!1,lock:s=!1,programmatic:n=!0,lerp:r=(n?this.options.lerp:void 0),duration:l=(n?this.options.duration:void 0),easing:h=(n?this.options.easing:void 0),onStart:a,onComplete:c,force:p=!1,userData:u}={}){if((this.isStopped||this.isLocked)&&!p)return;let m=t,v=e;if("string"==typeof m&&["top","left","start","#"].includes(m))m=0;else if("string"==typeof m&&["bottom","right","end"].includes(m))m=this.limit;else{let t=null;if("string"==typeof m?(t=document.querySelector(m),t||("#top"===m?m=0:console.warn("Lenis: Target not found",m))):m instanceof HTMLElement&&m?.nodeType&&(t=m),t){if(this.options.wrapper!==window){const t=this.rootElement.getBoundingClientRect();v-=this.isHorizontal?t.left:t.top}const e=t.getBoundingClientRect(),i=getComputedStyle(t),s=this.isHorizontal?Number.parseFloat(i.scrollMarginLeft):Number.parseFloat(i.scrollMarginTop),o=getComputedStyle(this.rootElement),n=this.isHorizontal?Number.parseFloat(o.scrollPaddingLeft):Number.parseFloat(o.scrollPaddingTop);m=(this.isHorizontal?e.left:e.top)+this.animatedScroll-(Number.isNaN(s)?0:s)-(Number.isNaN(n)?0:n)}}if("number"==typeof m){if(m+=v,this.options.infinite){if(n){this.targetScroll=this.animatedScroll=this.scroll;const t=m-this.animatedScroll;t>this.limit/2?m-=this.limit:t<-this.limit/2&&(m+=this.limit)}}else m=o(0,m,this.limit);if(m===this.targetScroll)return a?.(this),void c?.(this);if(this.userData=u??{},i)return this.animatedScroll=this.targetScroll=m,this.setScroll(this.scroll),this.reset(),this.preventNextNativeScrollEvent(),this.emit(),c?.(this),this.userData={},void requestAnimationFrame(()=>{this.dispatchScrollendEvent()});n||(this.targetScroll=m),"number"==typeof l&&"function"!=typeof h?h=d:"function"==typeof h&&"number"!=typeof l&&(l=1),this.animate.fromTo(this.animatedScroll,m,{duration:l,easing:h,lerp:r,onStart:()=>{s&&(this.isLocked=!0),this.isScrolling="smooth",a?.(this)},onUpdate:(t,e)=>{this.isScrolling="smooth",this.lastVelocity=this.velocity,this.velocity=t-this.animatedScroll,this.direction=Math.sign(this.velocity),this.animatedScroll=t,this.setScroll(this.scroll),n&&(this.targetScroll=t),e||this.emit(),e&&(this.reset(),this.emit(),c?.(this),this.userData={},requestAnimationFrame(()=>{this.dispatchScrollendEvent()}),this.preventNextNativeScrollEvent())}})}}preventNextNativeScrollEvent(){this._preventNextNativeScrollEvent=!0,requestAnimationFrame(()=>{this._preventNextNativeScrollEvent=!1})}hasNestedScroll(t,{deltaX:e,deltaY:i}){const s=Date.now();t._lenis||(t._lenis={});const o=t._lenis;let n,r,l,h,a,c,p,d,u,m;if(s-(o.time??0)>2e3){o.time=Date.now();const e=window.getComputedStyle(t);if(o.computedStyle=e,n=["auto","overlay","scroll"].includes(e.overflowX),r=["auto","overlay","scroll"].includes(e.overflowY),a=["auto"].includes(e.overscrollBehaviorX),c=["auto"].includes(e.overscrollBehaviorY),o.hasOverflowX=n,o.hasOverflowY=r,!n&&!r)return!1;p=t.scrollWidth,d=t.scrollHeight,u=t.clientWidth,m=t.clientHeight,l=p>u,h=d>m,o.isScrollableX=l,o.isScrollableY=h,o.scrollWidth=p,o.scrollHeight=d,o.clientWidth=u,o.clientHeight=m,o.hasOverscrollBehaviorX=a,o.hasOverscrollBehaviorY=c}else l=o.isScrollableX,h=o.isScrollableY,n=o.hasOverflowX,r=o.hasOverflowY,p=o.scrollWidth,d=o.scrollHeight,u=o.clientWidth,m=o.clientHeight,a=o.hasOverscrollBehaviorX,c=o.hasOverscrollBehaviorY;if(!(n&&l||r&&h))return!1;const v=Math.abs(e)>=Math.abs(i)?"horizontal":"vertical";let g,w,f,S,y,E;if("horizontal"===v)g=Math.round(t.scrollLeft),w=p-u,f=e,S=n,y=l,E=a;else{if("vertical"!==v)return!1;g=Math.round(t.scrollTop),w=d-m,f=i,S=r,y=h,E=c}return!E&&(g>=w||g<=0)||(f>0?g<w:g>0)&&S&&y}get rootElement(){return this.options.wrapper===window?document.documentElement:this.options.wrapper}get limit(){return this.options.naiveDimensions?this.isHorizontal?this.rootElement.scrollWidth-this.rootElement.clientWidth:this.rootElement.scrollHeight-this.rootElement.clientHeight:this.dimensions.limit[this.isHorizontal?"x":"y"]}get isHorizontal(){return"horizontal"===this.options.orientation}get actualScroll(){const t=this.options.wrapper;return this.isHorizontal?t.scrollX??t.scrollLeft:t.scrollY??t.scrollTop}get scroll(){return this.options.infinite?(this.animatedScroll%(t=this.limit)+t)%t:this.animatedScroll;var t}get progress(){return 0===this.limit?1:this.scroll/this.limit}get isScrolling(){return this._isScrolling}set isScrolling(t){this._isScrolling!==t&&(this._isScrolling=t,this.updateClassName())}get isStopped(){return this._isStopped}set isStopped(t){this._isStopped!==t&&(this._isStopped=t,this.updateClassName())}get isLocked(){return this._isLocked}set isLocked(t){this._isLocked!==t&&(this._isLocked=t,this.updateClassName())}get isSmooth(){return"smooth"===this.isScrolling}get className(){let t="lenis";return this.options.autoToggle&&(t+=" lenis-autoToggle"),this.isStopped&&(t+=" lenis-stopped"),this.isLocked&&(t+=" lenis-locked"),this.isScrolling&&(t+=" lenis-scrolling"),"smooth"===this.isScrolling&&(t+=" lenis-smooth"),t}updateClassName(){this.cleanUpClassName(),this.className.split(" ").forEach(t=>{this.rootElement.classList.add(t)})}cleanUpClassName(){for(const t of Array.from(this.rootElement.classList))("lenis"===t||t.startsWith("lenis-"))&&this.rootElement.classList.remove(t)}}}}]);