Skip to main content

Animations

Add beautiful pre-built animation effects to your React scrolling text component.

Available Animations

The library includes these pre-built animation modules:

  • Fade - Smooth fade in/out transition
  • Bounce - Bouncy entrance and exit
  • Flip - 3D flip effect
  • Rotate - Rotation animation
  • Scale In - Scale up entrance
  • Scale Out - Scale down exit
  • Zoom In Down - Zoom in from top
  • Cinematic - Cinematic entrance effect
  • Glitch - Glitch effect
  • Rubber Band - Rubber band effect
  • Swing - Swing effect

Animation Examples

Fade Animation

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

<ScrollingText options={fade}>
  <div>Fade</div>
  <div>Animation</div>
</ScrollingText>

Bounce Animation

import bounce from "web-scrolling-text/animation/bounce";

<ScrollingText options={bounce}>
  <div>Bounce</div>
  <div>Animation</div>
</ScrollingText>

Flip Animation

import flip from "web-scrolling-text/animation/flip";

<ScrollingText options={flip}>
  <div>Flip</div>
  <div>Animation</div>
</ScrollingText>

Rotate Animation

import rotate from "web-scrolling-text/animation/rotate";

<ScrollingText options={rotate}>
  <div>Rotate</div>
  <div>Animation</div>
</ScrollingText>

Scale In Animation

import scaleIn from "web-scrolling-text/animation/scaleIn";

<ScrollingText options={scaleIn}>
  <div>Scale In</div>
  <div>Animation</div>
</ScrollingText>

Scale Out Animation

import scaleOut from "web-scrolling-text/animation/scaleOut";

<ScrollingText options={scaleOut}>
  <div>Scale Out</div>
  <div>Animation</div>
</ScrollingText>

Zoom In Down Animation

import zoomInDown from "web-scrolling-text/animation/zoomInDown";

<ScrollingText options={zoomInDown}>
  <div>Zoom In Down</div>
  <div>Animation</div>
</ScrollingText>

Cinematic Animation

import cinematic from "web-scrolling-text/animation/cinematic";

<ScrollingText options={cinematic}>
  <div>Cinematic</div>
  <div>Animation</div>
</ScrollingText>

Glitch Animation

import glitch from "web-scrolling-text/animation/glitch";

<ScrollingText options={glitch}>
  <div>Glitch</div>
  <div>Animation</div>
</ScrollingText>

Rubber Band Animation

import rubberBand from "web-scrolling-text/animation/rubberBand";

<ScrollingText options={rubberBand}>
  <div>Rubber Band</div>
  <div>Animation</div>
</ScrollingText>

Swing Animation

import swing from "web-scrolling-text/animation/swing";

<ScrollingText options={swing}>
  <div>Swing</div>
  <div>Animation</div>
</ScrollingText>

Mixing Enter and Exit Animations​

Use different animations for enter and exit by accessing the individual properties:

App.tsx
import React from "react";
import ScrollingText from "web-scrolling-text/react";
import fade from "web-scrolling-text/animation/fade";
import bounce from "web-scrolling-text/animation/bounce";

function App() {
  return (
    <ScrollingText
      options={{
        enterAnimation: fade.enterAnimation,
        exitAnimation: bounce.exitAnimation,
      }}
    >
      <div>Fade In</div>
      <div>Bounce Out</div>
    </ScrollingText>
  );
}

export default App;

Combining with Other Options​

Spread the animation and add custom options:

App.tsx
import React from "react";
import ScrollingText from "web-scrolling-text/react";
import fade from "web-scrolling-text/animation/fade";

function App() {
  return (
    <ScrollingText
      options={{
        ...fade,
        interval: 2000,
        animationDuration: 600,
        loop: true
      }}
    >
      <div>Custom</div>
      <div>Configuration</div>
      <div>With Animation</div>
    </ScrollingText>
  );
}

export default App;

With Global Configuration​

Apply animations globally to all ScrollingText components:

index.tsx
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import { ScrollingTextProvider } from "web-scrolling-text/react";
import fade from "web-scrolling-text/animation/fade";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <ScrollingTextProvider
    options={{
      ...fade,
      interval: 3000,
      animationDuration: 1000,
      loop: true,
    }}
  >
    <App />
  </ScrollingTextProvider>
);
App.tsx
import React from "react";
import ScrollingText from "web-scrolling-text/react";

function App() {
  return (
    <div>
      {/* This will use the global fade animation */}
      <ScrollingText>
        <div>Inherits</div>
        <div>Global</div>
        <div>Animation</div>
      </ScrollingText>
    </div>
  );
}

export default App;

Multiple Components with Different Animations​

App.tsx
import React from "react";
import ScrollingText from "web-scrolling-text/react";
import fade from "web-scrolling-text/animation/fade";
import bounce from "web-scrolling-text/animation/bounce";
import flip from "web-scrolling-text/animation/flip";

function App() {
  return (
    <div>
      <ScrollingText options={fade}>
        <div>Fade</div>
        <div>Animation</div>
      </ScrollingText>

      <ScrollingText options={bounce}>
        <div>Bounce</div>
        <div>Animation</div>
      </ScrollingText>

      <ScrollingText options={flip}>
        <div>Flip</div>
        <div>Animation</div>
      </ScrollingText>
    </div>
  );
}

export default App;

TypeScript Support​

All animation modules are fully typed:

import type { OptionsType } from "web-scrolling-text/react";
import fade from "web-scrolling-text/animation/fade";

// fade is typed as { enterAnimation: string; exitAnimation: string; }
const options: OptionsType = {
  ...fade,
  interval: 2000
};

Creating Dynamic Animations​

App.tsx
import React, { useState } from "react";
import ScrollingText from "web-scrolling-text/react";
import fade from "web-scrolling-text/animation/fade";
import bounce from "web-scrolling-text/animation/bounce";
import flip from "web-scrolling-text/animation/flip";

const animations = { fade, bounce, flip };

function App() {
  const [selectedAnim, setSelectedAnim] = useState<'fade' | 'bounce' | 'flip'>('fade');

  return (
    <div>
      <select onChange={(e) => setSelectedAnim(e.target.value as any)}>
        <option value="fade">Fade</option>
        <option value="bounce">Bounce</option>
        <option value="flip">Flip</option>
      </select>

      <ScrollingText options={animations[selectedAnim]}>
        <div>Dynamic</div>
        <div>Animation</div>
        <div>Switching</div>
      </ScrollingText>
    </div>
  );
}

export default App;
Try the Playground

Visit the interactive playground to preview all animations and see them in action!

Animation Import Paths​

All animations can be imported from:

import fade from "web-scrolling-text/animation/fade";
import bounce from "web-scrolling-text/animation/bounce";
import flip from "web-scrolling-text/animation/flip";
import rotate from "web-scrolling-text/animation/rotate";
import scaleIn from "web-scrolling-text/animation/scaleIn";
import scaleOut from "web-scrolling-text/animation/scaleOut";
import zoomInDown from "web-scrolling-text/animation/zoomInDown";