UNPKG

alrdy-animate

Version:

A library to handle animations on scroll with GSAP integration.

1 lines 9.49 kB
"use strict";(this.webpackChunkAlrdyAnimate=this.webpackChunkAlrdyAnimate||[]).push([[928],{16:(t,e,r)=>{function n(t){return n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},n(t)}function o(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);e&&(n=n.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),r.push.apply(r,n)}return r}function a(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{};e%2?o(Object(r),!0).forEach((function(e){i(t,e,r[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(r)):o(Object(r)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(r,e))}))}return t}function i(t,e,r){return(e=function(t){var e=function(t){if("object"!=n(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var r=e.call(t,"string");if("object"!=n(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==n(e)?e:e+""}(e))in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}function c(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var r=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=r){var n,o,a,i,c=[],l=!0,u=!1;try{if(a=(r=r.call(t)).next,0===e){if(Object(r)!==r)return;l=!1}else for(;!(l=(n=a.call(r)).done)&&(c.push(n.value),c.length!==e);l=!0);}catch(t){u=!0,o=t}finally{try{if(!l&&null!=r.return&&(i=r.return(),Object(i)!==i))return}finally{if(u)throw o}}return c}}(t,e)||function(t,e){if(t){if("string"==typeof t)return l(t,e);var r={}.toString.call(t).slice(8,-1);return"Object"===r&&t.constructor&&(r=t.constructor.name),"Map"===r||"Set"===r?Array.from(t):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?l(t,e):void 0}}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function l(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=Array(e);r<e;r++)n[r]=t[r];return n}function u(t,e,r,n,o,a){var i=!0,c=0,l=!1,u=function(){i=!0,gsap.to(t,{y:"0%",duration:n,ease:r,overwrite:!0})},s=function(e){e>=a&&!l?(t.classList.add("is-scrolled"),l=!0):e<a&&l&&(t.classList.remove("is-scrolled"),l=!1)};ScrollTrigger.create({start:"top top",end:"max",onUpdate:function(a){var l=a.scroll();if(e.includes("change")&&s(l),e.includes("hide")){if(l<=10)return u(),void(c=l);var d=l-c;Math.abs(d)>20&&(d>0&&i?(i=!1,gsap.to(t,{y:"".concat(-100*o,"%"),duration:2*n,ease:r,overwrite:!0})):d<0&&!i&&u(),c=l)}},onRefresh:function(t){var r=t.scroll();e.includes("change")&&s(r)},ignoreMobileResize:!0,onLeaveBack:e.includes("hide")?u:void 0,onLeave:e.includes("hide")?u:void 0})}function s(t,e){return{nav:function(t,e,r,n,o,a){u(t,e,r,n,o,a)},backgroundColor:function(r,n,o,i,l){!function(t,e,r,n,o,i){var l=arguments.length>6&&void 0!==arguments[6]&&arguments[6];function u(t){var e=c(t.match(/\d+/g).map(Number),3),r=e[0],n=e[1],o=e[2],a=function(t){return t.toString(16).padStart(2,"0")};return"#".concat(a(r)).concat(a(n)).concat(a(o))}function s(t){return t?t.split(";").reduce((function(t,e){var r=c(e.split(":").map((function(t){return t.trim()})),2),n=r[0],o=r[1];return"bg"!==n&&"text"!==n||(t["bg"===n?"backgroundColor":"color"]=o),t}),{}):{}}var d=t.getAttribute("aa-scrub"),f="smoother"===d?4:"smooth"===d?2:"snap"===d?{snap:.2}:!!d,m=getComputedStyle(t),p={backgroundColor:u(m.backgroundColor),color:u(m.color)};e.set(t,p);var g=Array.from(t.querySelectorAll("[aa-wrapper-colors]")).map((function(t,e){var r=s(t.getAttribute("aa-wrapper-colors")),n=Array.from(t.querySelectorAll("[aa-item-colors]")).map((function(t){var e=s(t.getAttribute("aa-item-colors")),r=getComputedStyle(t);return{element:t,initialColors:{backgroundColor:u(r.backgroundColor),color:u(r.color)},colors:e}}));return{element:t,colors:r,items:n}}));g.forEach((function(c,u){var s=u>0?g[u-1]:null;if(d){e.set(t,p);var m=e.timeline({defaults:{duration:1,ease:"none"},paused:!0,data:{index:u}});if(Object.keys(c.colors).length>0){var b=s?{backgroundColor:s.colors.backgroundColor,color:s.colors.color}:p;m.fromTo(t,b,c.colors,0)}c.items.forEach((function(t){Object.keys(t.colors).length>0&&m.to(t.element,{backgroundColor:t.colors.backgroundColor,color:t.colors.color},"<")})),r.create(a(a({trigger:c.element,start:"top ".concat(100*i,"%"),end:"center ".concat(100*i,"%"),scrub:f,animation:m,markers:l,invalidateOnRefresh:!0,fastScrollEnd:!0,preventOverlaps:!0},"snap"!==d&&{snap:!1}),{},{onRefresh:function(n){var o=r.create({trigger:t,start:"top bottom"}),a=!o.isActive;o.kill(),a&&(e.set(t,p),g.forEach((function(t){t.items.forEach((function(t){e.set(t.element,t.initialColors)}))})))}})),c.element.dataset.stId="background-".concat(u)}else{var v=e.timeline({paused:!0,defaults:{duration:n,ease:o}});Object.keys(c.colors).length>0&&v.to(t,c.colors),c.items.forEach((function(t){Object.keys(t.colors).length>0&&v.to(t.element,a({},t.colors),"<")})),r.create({trigger:c.element,start:"top ".concat(100*i,"%"),onEnter:function(){v.play()},onLeaveBack:function(){v.reverse()},markers:l})}}))}(r,t,e,n,o,i,l)},parallax:function(r,n){!function(t,e,r){var n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"smooth",o=t.getAttribute("aa-animate").split("-"),a=o.includes("half"),i=o.includes("down"),c=o.find((function(t){return!isNaN(parseFloat(t))}))||40;if("hidden"===window.getComputedStyle(t.parentElement).overflow){var l=1+2*c/t.offsetHeight;e.set(t,{scale:l})}var u=e.timeline({paused:!0});u.fromTo(t,{y:i?-c:c},{y:i?c:-c,ease:"none"}),r.create({trigger:t.parentElement,start:"top bottom",end:a?"center center":"bottom top",scrub:n.includes("smoother")?5:n.includes("smooth")?2:!n.includes("snap")||{snap:.2},animation:u})}(r,t,e,n)},appear:function(e,r,n,o,a){return function(t,e,r,n,o,a){var i=c(t.getAttribute("aa-animate").split("-"),2),l=(i[0],i[1]),u={opacity:0,y:"up"===l?50*a:"down"===l?-50*a:0,x:"left"===l?50*a:"right"===l?-50*a:0},s={opacity:1,y:0,x:0,duration:r,ease:n,delay:o};return e.timeline().fromTo(t,u,s)}(e,t,r,n,o,a)},reveal:function(e,r,n,o){return function(t,e,r,n,o){var a,i,l=c(t.getAttribute("aa-animate").split("-"),2),u=(l[0],l[1]),s={up:{start:"inset(100% 0 0 0)",end:"inset(0% 0 0 0)"},down:{start:"inset(0 0 100% 0)",end:"inset(0 0 0% 0)"},left:{start:"inset(0 100% 0 0)",end:"inset(0 0% 0 0)"},right:{start:"inset(0 0 0 100%)",end:"inset(0 0 0 0%)"},center:{start:"circle(0% at 50% 50%)",end:"circle(150% at 50% 50%)"}},d=e.timeline();return e.set(t,{clipPath:(null===(a=s[u])||void 0===a?void 0:a.start)||s.up.start,opacity:"center"===u?0:1}),d.to(t,{clipPath:(null===(i=s[u])||void 0===i?void 0:i.end)||s.up.end,opacity:1,duration:r,ease:n,delay:o})}(e,t,r,n,o)},counter:function(e,r,n,o){return function(t,e,r,n,o){var a=c(t.getAttribute("aa-animate").split("-"),2),i=(a[0],a[1]),l=t.textContent,u=l.replace(/[,\.]/g,""),s=parseFloat(u),d=i?parseFloat(i):0,f=l.includes(","),m=l.includes(".");return isNaN(s)?(console.warn("Counter animation target must be a number"),e.timeline()):e.timeline().fromTo(t,{textContent:d},{textContent:s,duration:r,ease:n,delay:o,snap:{textContent:1},onUpdate:function(){var t=this.targets()[0].textContent;f?this.targets()[0].textContent=Number(t).toLocaleString("en-US").replace(/,/g,","):m&&(this.targets()[0].textContent=Number(t).toLocaleString("de-DE").replace(/\./g,"."))}})}(e,t,r,n,o)},marquee:function(r,n,o){return function(t,e,r,n,o){var a=t.getAttribute("aa-animate"),i=a.includes("right"),c=a.includes("hover"),l=a.includes("paused"),u=t.querySelector("[aa-marquee-scroller]"),s=t.querySelector("[aa-marquee-items]");if(u&&s){for(var d=window.innerWidth<479?.5:window.innerWidth<991?.75:1,f=parseInt(u.getAttribute("aa-marquee-scroller"))||0,m=n*(s.offsetWidth/window.innerWidth)*d,p=parseInt(s.getAttribute("aa-marquee-items"))||2,g=document.createDocumentFragment(),b=0;b<p;b++)g.appendChild(s.cloneNode(!0));u.appendChild(g);var v=t.querySelectorAll("[aa-marquee-items]"),y=i?1:-1;if(!l){var h=e.to(v,{xPercent:-100,repeat:-1,duration:m,ease:"linear"}).totalProgress(.5);if(e.set(v,{xPercent:1===y?100:-100}),h.timeScale(y),h.play(),c){var w=y;r.create({trigger:t,start:"top bottom",end:"bottom top",onUpdate:function(t){w=1===t.direction?-y:y}}),t.addEventListener("mouseenter",(function(){e.to(h,{timeScale:w/4,duration:.5})})),t.addEventListener("mouseleave",(function(){e.to(h,{timeScale:w,duration:.5})}))}t.setAttribute("data-marquee-status","normal"),r.create({trigger:t,start:"top bottom",end:"bottom top",toggleActions:"play pause resume pause",onUpdate:function(e){var r=1===e.direction,n=r?-y:y;h.timeScale(n),t.setAttribute("data-marquee-status",r?"normal":"inverted")}})}if(f>0){u.style.marginLeft="-".concat(f,"%"),u.style.width="".concat(2*f+100,"%"),console.log(o);var S=e.timeline({scrollTrigger:{trigger:t,start:"0% 100%",end:"100% 0%",scrub:"smoother"===o?4:"smooth"===o?2:"snap"===o?{snap:.2}:!!o||0}}),A=-1===y?f:-f;S.fromTo(u,{x:"".concat(A,"vw")},{x:"".concat(-A,"vw"),ease:"none"})}}else console.warn("Marquee elements not found. Required: [aa-marquee-scroller] and [aa-marquee-items]")}(r,t,e,n,o)}}}r.r(e),r.d(e,{createScrollAnimations:()=>s})}}]);