Animation

Simple

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}>
      {["Hello", "World", "How", "Are", "You"]}
    </ScrollingText>
  );
}

export default App;

Multiple Animations for entering and exiting text

You can use diffents animations for entering and exiting the text

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,
      }}
    >
      {["Hello", "World", "How", "Are", "You"]}
    </ScrollingText>
  );
}

export default App;

With other 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,
        animationDuration: 1000,
        interval: 3000,
      }}
    >
      {["Hello", "World", "How", "Are", "You"]}
    </ScrollingText>
  );
}

export default App;

With Global Configration

You can use animtions globally

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>
);