marquee-content/dist/index.umd.js

MarqueeContent provides a set of tools for creating dynamic and adaptive ticker animations on web pages using GSAP and ScrollTrigger.

(function(n,i){typeof exports=="object"&&typeof module<"u"?module.exports=i(require("gsap"),require("gsap/ScrollTrigger")):typeof define=="function"&&define.amd?define(["gsap","gsap/ScrollTrigger"],i):(n=typeof globalThis<"u"?globalThis:n||self).MarqueeContent=i(n.gsap,n.ScrollTrigger)})(this,function(n,i){"use strict";var d=Object.defineProperty;var p=(n,i,r)=>i in n?d(n,i,{enumerable:!0,configurable:!0,writable:!0,value:r}):n[i]=r;var a=(n,i,r)=>p(n,typeof i!="symbol"?i+"":i,r);const s=class s{constructor({element:e=".marquee"}={}){a(this,"gsapInstance",s._gsap);a(this,"timeline");a(this,"matchMedia");a(this,"element");a(this,"resizeObserver");a(this,"animationFrame");const t=e instanceof HTMLElement?e:document.querySelector(e);if(!t)throw new Error("Target element not found");this.element=t,this.gsapInstance=s._gsap,this.matchMedia=this.gsapInstance.matchMedia(),this.resizeObserver=new ResizeObserver(s.debounce(()=>{this.update()})),this.resizeObserver.observe(this.element)}static registerGSAP(e,t){s._gsap=e,s._ScrollTrigger=t}static debounce(e){let t=null;return(...l)=>{t!==null&&cancelAnimationFrame(t),t=requestAnimationFrame(()=>e(...l))}}init(){this.setup()}destroy(){this.animationFrame!==void 0&&(cancelAnimationFrame(this.animationFrame),this.animationFrame=void 0),this.resizeObserver.disconnect(),this.clearTimeline()}setup(){this.clearTimeline(),this.cloneElements(),this.setBreakpoints(),this.applySkew(),this.timeline=this.createAnimation()}update(){this.animationFrame!==void 0&&cancelAnimationFrame(this.animationFrame),this.animationFrame=requestAnimationFrame(()=>{var e,t;this.setup(),(t=(e=s._ScrollTrigger).refresh)==null||t.call(e)})}createAnimation(){var l;(l=this.timeline)==null||l.kill();const e=this.gsapInstance.timeline({scrollTrigger:{trigger:this.element,start:"top bottom",end:"bottom top",toggleActions:"resume pause resume pause",onUpdate:o=>{const{mcDirection:m}=this.element.dataset;m==="ltr"?e.timeScale(-1):m==="auto"&&e.timeScale(o.direction)}}}),t=this.element.dataset.mcBreakpoint||"";return this.matchMedia.add(t,()=>{const o=parseFloat(this.element.dataset.mcSpeed??"20");return e.to(this.element.children,{duration:o,x:"-100%",repeat:-1,ease:"none"}),e.totalProgress(.5),()=>{e.kill()}}),e}clearTimeline(){var e;(e=this.timeline)==null||e.kill(),this.timeline=void 0,this.gsapInstance.set(this.element.children,{clearProps:"all"})}setBreakpoints(){const{mcMax:e,mcMin:t}=this.element.dataset;this.element.dataset.mcBreakpoint=e?`(max-width: ${parseFloat(e)-.02}px)`:t?`(min-width: ${t}px)`:""}cloneElements(){const e=()=>{for(;this.element.childElementCount>1;)this.element.removeChild(this.element.lastChild)};e();const t=this.element.dataset.mcBreakpoint||"";this.matchMedia.add(t,()=>{const l=this.element.firstElementChild;if(!l)return()=>{};const o=Math.ceil(this.element.scrollWidth/l.clientWidth+2);if(this.element.childElementCount<o){const m=document.createDocumentFragment();for(let c=0;c<o-1;c++){const h=l.cloneNode(!0);m.appendChild(h)}this.element.appendChild(m)}return()=>{e()}})}applySkew(){const{mcSkew:e}=this.element.dataset;e&&(this.element.style.transformOrigin="center center",this.element.style.transform=`skew(0deg, ${e}deg)`)}};a(s,"_gsap",n.gsap),a(s,"_ScrollTrigger",i.ScrollTrigger);let r=s;return r});