Playground - Web Scrolling Text | Web Scrolling Text

⚙️ Configuration

Interval (ms): 3000

Animation Duration (ms): 1000

Enter Animation:

Exit Animation:

Loop Animation

📝 Text Items

0Wait

1Continue

2Search

3Check

4Look

👁️ Preview

Please

Wait

Now

Current Index: 0 / 4

💻 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>Wait</div>
      <div>Continue</div>
      <div>Search</div>
      <div>Check</div>
      <div>Look</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"),
    ["Wait", "Continue", "Search", "Check", "Look"],
    {
      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,
      ['Wait', 'Continue', 'Search', 'Check', 'Look'],
      {
        interval: 3000,
        animationDuration: 1000,
        loop: true,
      }
    );
    this.scroller.start();
  }

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