UNPKG

web-scrolling-text

Version:

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

8 lines (7 loc) 4.04 kB
/** * ScrollingText v0.5.7 * build on Sat, 12 Jul 2025 18:15:24 GMT * (c) 2025 Hardik Naik * Released under the ISC License. */ !function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):(t="undefined"!=typeof globalThis?globalThis:t||self).ScrollingText=i()}(this,(function(){"use strict";var t=function(){return t=Object.assign||function(t){for(var i,n=1,s=arguments.length;n<s;n++)for(var o in i=arguments[n])Object.prototype.hasOwnProperty.call(i,o)&&(t[o]=i[o]);return t},t.apply(this,arguments)};"function"==typeof SuppressedError&&SuppressedError;var i="scrolling-text-wrapper",n="scrolling-text-animationin",s="scrolling-text-animationout",o="scrolling-text-text",e="scrolling-text-enter",r="scrolling-text-exit";!function(t,i){void 0===i&&(i={});var n=i.insertAt;if("undefined"!=typeof document){var s=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&s.firstChild?s.insertBefore(o,s.firstChild):s.appendChild(o),o.styleSheet?o.styleSheet.cssText=t:o.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);left:0;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%)}}");var h={interval:3e3,animationDuration:1e3,loop:!0};return function(){function a(i,n,s){void 0===s&&(s={}),this.t=null,s=t(t({},h),s),this.i=i,this.o=n,this.h=s.interval,this.l=s.animationDuration,this.u=s.enterAnimation,this.m=s.exitAnimation,this.v=s.loop,this.p=0,this.T=s.onReachEnd,this.j=s.onChange,this.Y=s.onStart,this.O=s.onStop,this.k()}return a.prototype.k=function(){this.dispose(),this.S=document.createElement("div"),this.S.className=i,this.S.style.setProperty("--duration","".concat(this.l,"ms")),this.u?this.S.style.setProperty("--enter-animation",this.u):this.S.classList.add(n),this.m?this.S.style.setProperty("--exit-animation",this.m):this.S.classList.add(s),this.i.appendChild(this.S),this.D(this.o[this.p],!1)},a.prototype.D=function(t,i){var n,s=this;void 0===i&&(i=!0);var h=document.createElement("div");h.className=o,h.setAttribute("text-index",this.p.toString()),i&&h.classList.add(e),"string"==typeof t&&(h.innerHTML=t),null===(n=this.S)||void 0===n||n.appendChild(h),this.q?(this.q.classList.add(r),this.q.setAttribute("aria-hidden","true"),setTimeout((function(){var t;s.q&&(null===(t=s.S)||void 0===t?void 0:t.contains(s.q))&&s.S.removeChild(s.q),i&&h.classList.remove(e),s.q=h}),this.l)):this.q=h},a.prototype.A=function(){var t,i,n;this.p=(this.p+1)%this.o.length,null===(t=this.j)||void 0===t||t.call(this,this.p),this.p===this.o.length-1?(null===(i=this.T)||void 0===i||i.call(this),this.v?this.B():(null===(n=this.O)||void 0===n||n.call(this),this.C())):this.B(),this.D(this.o[this.p])},a.prototype.B=function(){var t=this;this.C(),this.t=setTimeout((function(){t.A()}),this.h)},a.prototype.C=function(){this.t&&(clearTimeout(this.t),this.t=null)},a.prototype.start=function(){var t,i;!this.t&&(null===(t=this.i)||void 0===t?void 0:t.innerHTML)&&(null===(i=this.Y)||void 0===i||i.call(this),this.B())},a.prototype.pause=function(){this.C()},a.prototype.stop=function(){var t;this.C(),this.p&&(this.p=0,this.D(this.o[this.p])),null===(t=this.O)||void 0===t||t.call(this)},a.prototype.dispose=function(){this.C(),this.i.innerHTML="",this.q=null},Object.defineProperty(a,"version",{get:function(){return"0.5.7"},enumerable:!1,configurable:!0}),a}()}));