alrdy-animate
Version:
A library to handle animations on scroll with GSAP integration.
1 lines • 7.51 kB
JavaScript
;(this.webpackChunkAlrdyAnimate=this.webpackChunkAlrdyAnimate||[]).push([[955],{608:(t,r,e)=>{function o(t){return o="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},o(t)}function n(t,r){var e=Object.keys(t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);r&&(o=o.filter((function(r){return Object.getOwnPropertyDescriptor(t,r).enumerable}))),e.push.apply(e,o)}return e}function a(t,r,e){return(r=function(t){var r=function(t){if("object"!=o(t)||!t)return t;var r=t[Symbol.toPrimitive];if(void 0!==r){var e=r.call(t,"string");if("object"!=o(e))return e;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==o(r)?r:r+""}(r))in t?Object.defineProperty(t,r,{value:e,enumerable:!0,configurable:!0,writable:!0}):t[r]=e,t}function l(t,r){if(t){if("string"==typeof t)return i(t,r);var e={}.toString.call(t).slice(8,-1);return"Object"===e&&t.constructor&&(e=t.constructor.name),"Map"===e||"Set"===e?Array.from(t):"Arguments"===e||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(e)?i(t,r):void 0}}function i(t,r){(null==r||r>t.length)&&(r=t.length);for(var e=0,o=Array(r);e<r;e++)o[e]=t[e];return o}function c(t,r,e,o,c,u,s){var f=arguments.length>7&&void 0!==arguments[7]&&arguments[7],p=arguments.length>8?arguments[8]:void 0;function y(t){return t?t.split(";").reduce((function(t,r){var e,o,n=(e=r.split(":").map((function(t){return t.trim()})),o=2,function(t){if(Array.isArray(t))return t}(e)||function(t,r){var e=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=e){var o,n,a,l,i=[],c=!0,u=!1;try{if(a=(e=e.call(t)).next,0===r){if(Object(e)!==e)return;c=!1}else for(;!(c=(o=a.call(e)).done)&&(i.push(o.value),i.length!==r);c=!0);}catch(t){u=!0,n=t}finally{try{if(!c&&null!=e.return&&(l=e.return(),Object(l)!==l))return}finally{if(u)throw n}}return i}}(e,o)||l(e,o)||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.")}()),a=n[0],i=n[1];return"bg"!==a&&"text"!==a||(t["bg"===a?"backgroundColor":"color"]=i),t}),{}):{}}function g(t){return Object.keys(t).length>0}function m(t,e){g(e)&&r.set(t,e)}var b=getComputedStyle(t),d={backgroundColor:b.backgroundColor,color:b.color},v=Array.from(t.querySelectorAll("[aa-wrapper-colors]")).map((function(t,r){var e,o=y(t.getAttribute("aa-wrapper-colors")),n=Array.from(t.querySelectorAll("[aa-item-colors]")).map((function(t){var r=y(t.getAttribute("aa-item-colors"));return{element:t,colors:r}})),a=y(t.getAttribute("aa-item-colors")),c=null;return g(a)&&(c={element:t,colors:a}),{element:t,colors:o,items:c?[c].concat((e=n,function(t){if(Array.isArray(t))return i(t)}(e)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(e)||l(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.")}())):n}}));0!==v.length&&(setTimeout((function(){for(var r=window.scrollY,e=r+.5*window.innerHeight,o=-1,n=0;n<v.length;n++){var a=v[n].element.getBoundingClientRect(),l=a.top+r,i=a.bottom+r;if(l<=e&&i>=e){o=n;break}}if(o>=0){var c=v[o];m(t,c.colors),c.items.forEach((function(t){m(t.element,t.colors)}))}else m(t,d)}),100),v.forEach((function(l,i){var y=i>0?v[i-1]:null;if(p){var m=r.timeline({defaults:{duration:1,ease:"none"},paused:!0,data:{index:i}});if(g(l.colors)){var b=y?{backgroundColor:y.colors.backgroundColor,color:y.colors.color}:d;m.fromTo(t,b,l.colors,0)}l.items.forEach((function(t){g(t.colors)&&m.to(t.element,{backgroundColor:t.colors.backgroundColor,color:t.colors.color},"<")})),e.create({trigger:l.element,start:u,end:s,scrub:!!p&&(parseFloat(p)||!0),animation:m,markers:f,invalidateOnRefresh:!0,fastScrollEnd:!0,preventOverlaps:!0}),l.element.dataset.stId="background-".concat(i)}else{var h=r.timeline({paused:!0,defaults:{duration:o,ease:c}});g(l.colors)&&h.to(t,l.colors),l.items.forEach((function(t){g(t.colors)&&h.to(t.element,function(t){for(var r=1;r<arguments.length;r++){var e=null!=arguments[r]?arguments[r]:{};r%2?n(Object(e),!0).forEach((function(r){a(t,r,e[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(e)):n(Object(e)).forEach((function(r){Object.defineProperty(t,r,Object.getOwnPropertyDescriptor(e,r))}))}return t}({},t.colors),"<")})),e.create({trigger:l.element,start:u,onEnter:function(){h.play()},onLeaveBack:function(){h.reverse()},markers:f})}})))}function u(t){var r=Array.from(t.querySelectorAll("[aa-clip-trigger]")),e=Array.from(t.querySelectorAll("[aa-clip-content]")),o=Array.from(t.querySelectorAll("[aa-clip-background]")),n=e.length,a={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%)"}};r.forEach((function(t,r){var l=e[r],i=o[r];if(l){l.style.zIndex=n-r;var c=l.getAttribute("aa-clip-content")||"vertical",u=a[c],s=e[r+1],f=s?s.getAttribute("aa-clip-content")||"vertical":null,p=f?a[f]:null,y=gsap.timeline({scrollTrigger:{trigger:t,start:0===r?"top top":"top bottom",end:r===n-1?"bottom bottom":"bottom top",scrub:!0},defaults:{ease:"none"}});0===r?(gsap.set(l,{clipPath:u.start}),f===c?y.to(l,{clipPath:u.end}):f&&p&&y.to(l,{clipPath:p.end})):r===n-1?(gsap.set(l,{clipPath:u.initial}),y.to(l,{clipPath:u.start})):(gsap.set(l,{clipPath:u.initial}),y.to(l,{clipPath:u.start}),f===c?y.to(l,{clipPath:u.end}):f&&p&&y.to(l,{clipPath:p.end})),i&&gsap.timeline({scrollTrigger:{trigger:t,start:"top top",end:"bottom top",scrub:!0},defaults:{ease:"none"}}).to(i,{yPercent:50})}}))}function s(t,r,e){var o=Array.from(t.querySelectorAll("[aa-stack-trigger]")),n=Array.from(t.querySelectorAll("[aa-stack-content]")),a=n.length;n.forEach((function(t,r){gsap.set(t,{opacity:0,zIndex:a-r})})),o.forEach((function(t,o){var a=n[o];a&&gsap.timeline({scrollTrigger:{trigger:t,start:"top center",end:"bottom center",scrub:!!r&&(parseFloat(r)||!0)}}).fromTo(a,{opacity:0,yPercent:10*e},{opacity:1,yPercent:0,duration:.2},0).to(a,{opacity:1,yPercent:0,duration:.6},.2).to(a,{opacity:0,yPercent:-10*e,duration:.2},.8)}))}function f(t,r){return{backgroundColor:function(e,o,n,a,l,i,u){c(e,t,r,o,n,a,l,i,u)},parallax:function(r,e,o){!function(t,r,e,o,n){var l=t.querySelector("[aa-parallax-target]")||t,i=n&&n.includes("horizontal")?"xPercent":"yPercent",c=!o||parseFloat(o),u=t.getAttribute("aa-parallax-start"),s=null!==u?parseFloat(u):20,f=t.getAttribute("aa-parallax-end"),p=null!==f?parseFloat(f):-20,y=t.getAttribute("aa-scroll-start")||"top bottom",g="clamp(".concat(y,")"),m=t.getAttribute("aa-scroll-end")||"bottom top",b="clamp(".concat(m,")");r.fromTo(l,a({},i,s),a(a(a({},i,p),"ease","none"),"scrollTrigger",{trigger:t,start:g,end:b,scrub:c}))}(r,t,0,e,o)},clip:function(t){return u(t)},stack:function(t,r,e){return s(t,r,e)}}}e.r(r),e.d(r,{createSectionAnimations:()=>f})}}]);