Works With All Platforms
Use the same powerful API across React, Vanilla JavaScript, and Angular
React Integration
Seamlessly integrate scrolling text animations into your React applications with our dedicated React component. Fully typed with TypeScript support and hooks-ready.
- ✓ Native React component
- ✓ Full TypeScript support
- ✓ Hooks compatible
- ✓ SSR ready for Next.js
import ScrollingText from "web-scrolling-text/react";
import fade from "web-scrolling-text/animation/fade";
function App() {
return (
<ScrollingText options={fade}>
<div>Hello World</div>
<div>Beautiful Animations</div>
<div>Easy to Use</div>
</ScrollingText>
);
}Vanilla JavaScript
Use with plain JavaScript for maximum flexibility and zero dependencies. Perfect for any project without framework constraints. Lightweight and fast.
- ✓ Zero dependencies
- ✓ Framework agnostic
- ✓ Tiny bundle size (~3KB)
- ✓ Works everywhere
import ScrollingText from "web-scrolling-text";
import fade from "web-scrolling-text/animation/fade";
const container = document.getElementById('scrolling-text');
const scrollingText = new ScrollingText(container, ['Hello', 'World', 'Welcome', 'to', 'Scrolling Text'], {
...fade,
interval: 3000
});
scrollingText.start();Angular Support
Integrate smoothly into your Angular applications with full lifecycle support. Works with Angular's change detection and component architecture out of the box.
- ✓ Angular lifecycle compatible
- ✓ Directive support
- ✓ Zone.js friendly
- ✓ AOT compilation ready
import { Component } from '@angular/core';
import ScrollingText from 'web-scrolling-text';
import fade from 'web-scrolling-text/animation/fade';
@Component({
selector: 'app-root',
template: '<div #scrollingText></div>'
})
export class AppComponent {
ngAfterViewInit() {
const st = new ScrollingText(this.scrollingText, ['Hello', 'World', 'Welcome', 'to', 'Scrolling Text'], fade);
st.start();
}
}Web Component
Use the custom element directly in your HTML. No build step required, just import and use the <scrolling-text> tag.
- ✓ Native Custom Element
- ✓ Works with any framework
- ✓ Declarative HTML API
- ✓ Zero config required
<!-- If using a bundler (React/Vue/Svelte) -->
<script>
import { register } from "web-scrolling-text/element";
register();
</script>
<!-- OR: Import via CDN -->
<script src="https://unpkg.com/web-scrolling-text/dist/element.min.js"></script>
<!-- Use the custom element -->
<scrolling-text
interval="3000"
animation-duration="1000"
enter-animation="fade"
>
<div>Native</div>
<div>Web</div>
<div>Component</div>
</scrolling-text>import ScrollingText from "web-scrolling-text/react";
import fade from "web-scrolling-text/animation/fade";
function App() {
return (
<ScrollingText options={fade}>
<div>Hello World</div>
<div>Beautiful Animations</div>
<div>Easy to Use</div>
</ScrollingText>
);
}import ScrollingText from "web-scrolling-text";
import fade from "web-scrolling-text/animation/fade";
const container = document.getElementById('scrolling-text');
const scrollingText = new ScrollingText(container, ['Hello', 'World', 'Welcome', 'to', 'Scrolling Text'], {
...fade,
interval: 3000
});
scrollingText.start();import { Component } from '@angular/core';
import ScrollingText from 'web-scrolling-text';
import fade from 'web-scrolling-text/animation/fade';
@Component({
selector: 'app-root',
template: '<div #scrollingText></div>'
})
export class AppComponent {
ngAfterViewInit() {
const st = new ScrollingText(this.scrollingText, ['Hello', 'World', 'Welcome', 'to', 'Scrolling Text'], fade);
st.start();
}
}<!-- If using a bundler (React/Vue/Svelte) -->
<script>
import { register } from "web-scrolling-text/element";
register();
</script>
<!-- OR: Import via CDN -->
<script src="https://unpkg.com/web-scrolling-text/dist/element.min.js"></script>
<!-- Use the custom element -->
<scrolling-text
interval="3000"
animation-duration="1000"
enter-animation="fade"
>
<div>Native</div>
<div>Web</div>
<div>Component</div>
</scrolling-text>Why Choose Web Scrolling Text?
Everything you need to create stunning text animations
Lightning Fast
Optimized for performance with smooth 60fps animations. Only ~3KB gzipped - smaller than a single image.
8+ Animations
Fade, bounce, flip, rotate, scale, and more. Mix and match enter/exit animations for endless possibilities.
Highly Customizable
Fine-tune timing, duration, loops, and callbacks. Or create your own custom CSS animations.
Responsive & Accessible
Works flawlessly on all devices and screen sizes. Built with accessibility best practices in mind.
TypeScript First
Full TypeScript support with complete type definitions. Enjoy autocomplete and type safety everywhere.
Framework Agnostic
Use with React, Next.js, Angular, Vue, or vanilla JavaScript. One API, unlimited possibilities.
Real-World Use Cases
See how developers are using web-scrolling-text to create engaging experiences
Hero Headlines
Rotate through multiple value propositions or taglines in your hero section. Perfect for showcasing different product benefits or brand messages dynamically.
Feature Rotations
Highlight different features or capabilities in a compact space. Ideal for product descriptions, pricing pages, and feature comparison sections.
Customer Testimonials
Cycle through customer quotes and reviews to build trust. Great for displaying multiple testimonials without taking up too much space.
Live Announcements
Keep users informed with scrolling announcements or update banners. Ideal for broadcasting new releases, maintenance alerts, or community news.
Status Messages
Display rotating status updates, notifications, or system messages. Perfect for admin panels, monitoring dashboards, and alert systems.
Brand Values
Communicate your company's core values or mission with animated taglines. Ideal for headers, footers, and about page hero sections.