web-scrolling-text/dist/animation/glitch.min.js

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

/**
* ScrollingText-glitch v6.1.5
* build on Wed, 31 Dec 2025 04:31:21 GMT
* (c) 2025 Hardik Naik
* Released under the MIT License.
*/
!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):((t="undefined"!=typeof globalThis?globalThis:t||self).ScrollingTextAnimation=t.ScrollingTextAnimation||{},t.ScrollingTextAnimation.glitch=n())}(this,(function(){"use strict";var t="scrolling-text-glitch-in",n="scrolling-text-glitch-out";return function(t,n){void 0===n&&(n={});var e=n.insertAt;if("undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===e&&a.firstChild?a.insertBefore(i,a.firstChild):a.appendChild(i),i.styleSheet?i.styleSheet.cssText=t:i.appendChild(document.createTextNode(t))}}("@keyframes scrolling-text-glitch-in{0%{clip-path:inset(50% 0 30% 0);opacity:0;transform:translateX(-20px)}20%{clip-path:inset(10% 0 60% 0);opacity:1;transform:translateX(10px)}40%{clip-path:inset(40% 0 40% 0);transform:translateX(-5px)}60%{clip-path:inset(80% 0 5% 0);transform:translateX(5px)}80%{clip-path:inset(10% 0 80% 0);transform:translateX(-2px)}to{clip-path:inset(0 0 0 0);opacity:1;transform:translateX(0)}}@keyframes scrolling-text-glitch-out{0%{clip-path:inset(0 0 0 0);opacity:1;transform:translateX(0)}20%{clip-path:inset(20% 0 50% 0);transform:translateX(-5px)}40%{clip-path:inset(60% 0 10% 0);transform:translateX(10px)}60%{clip-path:inset(30% 0 60% 0);transform:translateX(-10px)}80%{clip-path:inset(80% 0 5% 0);opacity:1;transform:translateX(5px)}to{clip-path:inset(10% 0 80% 0);opacity:0;transform:translateX(-20px)}}"),{enterAnimation:t,exitAnimation:n}}));