🎬 Web Scrolling Text

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

🚀 Live Demo • 🎮 Playground • 📚 Documentation

https://github.com/user-attachments/assets/87e55d25-2435-4ca6-aaad-ef0fb9d378d7

📦 Installation

npm i web-scrolling-text

🚀 Quick Start

Vanilla JavaScript

<div id="myText"></div>
<script src="https://unpkg.com/web-scrolling-text/dist/index.min.js"></script>
<script>
  const scroller = new ScrollingText(
    document.getElementById("myText"),
    ["Hello", "World", "👋"]
  );
  scroller.start();
</script>

→ View Vanilla JS Docs

Web Component

Via CDN:

<script src="https://unpkg.com/web-scrolling-text/dist/element.min.js"></script>

<scrolling-text>
  <div>Hello</div>
  <div>World</div>
</scrolling-text>

Via NPM (Bundlers):

import { register } from "web-scrolling-text/element";
register();

→ View Web Component Docs

React

import ScrollingText from "web-scrolling-text/react";

function App() {
  return (
    <ScrollingText>
      <div>Hello</div>
      <div>World</div>
      <div>👋</div>
    </ScrollingText>
  );
}

→ View React Docs

Next.js

"use client";
import ScrollingText from "web-scrolling-text/react";

export default function App() {
  return (
    <ScrollingText options={{ interval: 2000 }}>
      <div>Welcome</div>
      <div>to Next.js</div>
    </ScrollingText>
  );
}

✨ Features

• 🎨 8+ Pre-built Animations - Fade, bounce, flip, rotate, scale, and more
• ⚡ Lightweight - Minimal bundle size with zero dependencies
• 🔧 Highly Customizable - Control timing, animations, and behavior
• 📱 Responsive - Works seamlessly on all devices
• 🎯 TypeScript Support - Full type definitions included
• 🌐 Framework Agnostic - Use with React, Next.js, Angular, or vanilla JS
• 🎭 SSR Compatible - Works with server-side rendering
• ♿ Accessible - Built with accessibility in mind

📖 Documentation

Getting Started

• Installation
• CDN Usage

Vanilla JavaScript

• Basic Usage
• Configuration Options
• Control Methods
• Animations

React

• Basic Usage
• Configuration Options
• Control Methods
• Global Configuration
• Animations

Angular

• Basic Usage
• Configuration Options
• Control Methods
• Animations

Web Component

• Getting Started
• Framework Integration

Additional Resources

• API Reference & Types
• Interactive Playground
• Git Examples

🎯 Quick Examples

With Animation

import ScrollingText from "web-scrolling-text/react";
import fade from "web-scrolling-text/animation/fade";

<ScrollingText options={{ ...fade }}>
  <div>Beautiful</div>
  <div>Animations</div>
</ScrollingText>

With Control Methods

const scrollerRef = useRef();

<ScrollingText ref={scrollerRef}>
  <div>Controlled</div>
  <div>Animation</div>
</ScrollingText>

scrollerRef.current?.pause();  // Pause
scrollerRef.current?.start();  // Resume

→ See more examples

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

ICS © Hardik Naik

🔗 Links

• GitHub Repository
• NPM Package
• Documentation
• Live Demo
• Playground
• Examples