Playground - Web Scrolling Text | Web Scrolling Text

⚙️ Configuration

Interval (ms): 3000

Animation Duration (ms): 1000

Enter Animation:

Exit Animation:

Loop Animation

📝 Text Items

0Hello World

1Welcome to Web Scrolling Text

2Customize Your Animation

3🎨 Beautiful Animations

👁️ Preview

Hello World

Current Index: 0 / 3

💻 Generated Code

React
Vanilla JS
Angular

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

function App() {
  return (
    <ScrollingText options={{
    interval: 3000,
    animationDuration: 1000,
    loop: true,
  }}>
      <div>Hello World</div>
      <div>Welcome to Web Scrolling Text</div>
      <div>Customize Your Animation</div>
      <div>🎨 Beautiful Animations</div>
    </ScrollingText>
  );
}

<div id="scrollingText"></div>
<script src="https://unpkg.com/web-scrolling-text/dist/index.min.js"></script>
<script>
  const scroller = new ScrollingText(
    document.getElementById("scrollingText"),
    ["Hello World", "Welcome to Web Scrolling Text", "Customize Your Animation", "🎨 Beautiful Animations"],
    {
      interval: 3000,
      animationDuration: 1000,
      loop: true,
    }
  );
  scroller.start();
</script>

import { Component, AfterViewInit, OnDestroy, ViewChild, ElementRef } from '@angular/core';
import Scrolling from 'web-scrolling-text';

@Component({
  selector: 'app-scrolling-text',
  standalone: true,
  template: `<div #scrollContainer></div>`,
})
export class ScrollingTextComponent implements AfterViewInit, OnDestroy {
  @ViewChild('scrollContainer') scrollContainer!: ElementRef;
  private scroller?: Scrolling;

  ngAfterViewInit(): void {
this.scroller = new Scrolling(
      this.scrollContainer.nativeElement,
      ['Hello World', 'Welcome to Web Scrolling Text', 'Customize Your Animation', '🎨 Beautiful Animations'],
      {
        interval: 3000,
        animationDuration: 1000,
        loop: true,
      }
    );
    this.scroller.start();
  }

  ngOnDestroy(): void {
    this.scroller?.dispose();
  }
}