web-scrolling-text/dist/element.es.js

A lightweight, customizable text animation library for creating smooth scrolling text effects with support for React, Next.js, Angular and vanilla JavaScript

/**
* ScrollingText v6.1.5
* build on Wed, 31 Dec 2025 04:31:13 GMT
* (c) 2025 Hardik Naik
* Released under the MIT License.
*/
var t="scrolling-text-wrapper",i="scrolling-text-animationin",s="scrolling-text-animationout",n="scrolling-text-text",e="scrolling-text-enter",o="scrolling-text-exit";!function(t,i){void 0===i&&(i={});var s=i.insertAt;if("undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],e=document.createElement("style");e.type="text/css","top"===s&&n.firstChild?n.insertBefore(e,n.firstChild):n.appendChild(e),e.styleSheet?e.styleSheet.cssText=t:e.appendChild(document.createTextNode(t))}}(".scrolling-text-wrapper{position:relative}.scrolling-text-animationin{--enter-animation:scrolling-text-scrollin}.scrolling-text-animationout{--exit-animation:scrolling-text-scrollout}.scrolling-text-text{white-space:nowrap;width:100%}.scrolling-text-enter{animation:var(--duration) ease forwards;animation-name:var(--enter-animation)}.scrolling-text-exit{animation:var(--duration) ease forwards;animation-name:var(--exit-animation);position:absolute;top:0;width:100%}@keyframes scrolling-text-scrollin{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes scrolling-text-scrollout{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-100%)}}");const a={interval:3e3,animationDuration:1e3,loop:!0};class l{constructor(t,i,s={}){this.t=null,s=Object.assign(Object.assign({},a),s),this.i=t,this.o=i,this.l=s.interval,this.h=s.animationDuration,this.u=s.enterAnimation,this.m=s.exitAnimation,this.v=s.loop,this.p=0,this._=s.onReachEnd,this.T=s.onChange,this.k=s.onStart,this.C=s.onStop,this.Y()}Y(){this.dispose(),this.I=document.createElement("div"),this.I.className=t,this.I.style.setProperty("--duration",`${this.h}ms`),this.u?this.I.style.setProperty("--enter-animation",this.u):this.I.classList.add(i),this.m?this.I.style.setProperty("--exit-animation",this.m):this.I.classList.add(s),this.i.appendChild(this.I),this.O(this.o[this.p],!1)}O(t,i=!0){var s;const a=document.createElement("div");a.className=n,a.setAttribute("text-index",this.p.toString()),i&&a.classList.add(e),"string"==typeof t&&(a.innerHTML=t),null===(s=this.I)||void 0===s||s.appendChild(a),this.j?(this.j.classList.add(o),this.j.setAttribute("aria-hidden","true"),setTimeout((()=>{var t;this.j&&(null===(t=this.I)||void 0===t?void 0:t.contains(this.j))&&this.I.removeChild(this.j),i&&a.classList.remove(e),this.j=a}),this.h)):this.j=a}A(){var t,i,s;this.p=(this.p+1)%this.o.length,null===(t=this.T)||void 0===t||t.call(this,this.p),this.p===this.o.length-1?(null===(i=this._)||void 0===i||i.call(this),this.v?this.H():(null===(s=this.C)||void 0===s||s.call(this),this.L())):this.H(),this.O(this.o[this.p])}H(){this.L(),this.t=setTimeout((()=>{this.A()}),this.l)}L(){this.t&&(clearTimeout(this.t),this.t=null)}start(){var t,i;!this.t&&(null===(t=this.i)||void 0===t?void 0:t.innerHTML)&&(null===(i=this.k)||void 0===i||i.call(this),this.H())}pause(){this.L()}stop(){var t;this.L(),this.p&&(this.p=0,this.O(this.o[this.p])),null===(t=this.C)||void 0===t||t.call(this)}dispose(){this.L(),this.i.innerHTML="",this.j=null}static get version(){return"__VERSION__"}}const h="undefined"==typeof window||"undefined"==typeof HTMLElement?class{}:HTMLElement;class r extends h{static get observedAttributes(){return["interval","animation-duration","enter-animation","exit-animation","loop","auto-start"]}constructor(){super(),this.M=null,this.N=[]}connectedCallback(){this.N=Array.from(this.children),this.D()}disconnectedCallback(){var t;null===(t=this.M)||void 0===t||t.dispose(),this.M=null}attributeChangedCallback(t,i,s){i!==s&&this.isConnected&&this.D()}D(){var t;null===(t=this.M)||void 0===t||t.dispose();const i=this.N.map((t=>t.innerHTML));if(0===i.length)return void console.warn("No child elements provided for scrolling-text element");const s={},n=this.getAttribute("interval");n&&(s.interval=parseInt(n,10));const e=this.getAttribute("animation-duration");e&&(s.animationDuration=parseInt(e,10));const o=this.getAttribute("enter-animation");o&&(s.enterAnimation=o);const a=this.getAttribute("exit-animation");a&&(s.exitAnimation=a);const h=this.getAttribute("loop");null!==h&&(s.loop="false"!==h),this.M=new l(this,i,s);"false"!==this.getAttribute("auto-start")&&this.M.start()}start(){var t;null===(t=this.M)||void 0===t||t.start()}pause(){var t;null===(t=this.M)||void 0===t||t.pause()}stop(){var t;null===(t=this.M)||void 0===t||t.stop()}dispose(){var t;null===(t=this.M)||void 0===t||t.dispose()}}const c=()=>{"undefined"!=typeof window&&(customElements.get("scrolling-text")||customElements.define("scrolling-text",r))};export{r as ScrollingTextElement,c as register};