Awesome

react-text-loop

text-loop2

An animated loop of text nodes for your headings. Uses react-motion for the transition so it handles super fast animations and spring params.

Installation

npm install react-text-loop or yarn add react-text-loop

How to use

You can also run the examples by cloning the repo and running yarn start.

Usage

import TextLoop from "react-text-loop";
import Link from "react-router";
import { BodyText } from "./ui";

class App extends Component {
    render() {
        return (
            <h2>
                <TextLoop>
                    <span>First item</span>
                    <Link to="/">Second item</Link>
                    <BodyText>Third item</BodyText>
                </TextLoop>{" "}
                and something else.
            </h2>
        );
    }
}

Props

Prop	Type	Default	Definition
interval	number \| array	`3000`	The frequency (in ms) that the words change. Can also pass an array if you want a different interval per children
delay	number	`0`	A delay (in ms) for the animation to start. This allows to use multiple instances to create a staggered animation effect for example.
adjustingSpeed	number	`150`	The speed that the container around each word adjusts to the next one (in ms). Usually you don't need to change this.
fade	boolean	`true`	Enable or disable the fade animation on enter and leave
mask	boolean	`false`	Mask the animation around the bounding box of the animated content
noWrap	boolean	`true`	Disable `whitepace: nowrap` style for each element. This is used by default so we can always get the right width of the element but can have issues sometimes.
springConfig	object	`{ stiffness: 340, damping: 30 }`	Configuration for react-motion spring
className	string		Any additional CSS classes you might want to use to style the image
children	node		The words you want to loop (required)

Caveats

Because <TextLoop> loops through its children nodes, only root-level nodes will be considered so doing something like:

<TextLoop>
    <div>
        <span>First item</span>
        <span>Second item</span>
    </div>
    <div>Third item</div>
</TextLoop>;

will make first and second item to be treated as one and animate together.

You can also just send a normal array as children prop if you don't need any individual styling for each node.

<TextLoop children={["Trade faster", "Increase sales", "Stock winners", "Price perfectly"]} />;

Examples

Fast transition

text-loop-fast-small

<TextLoop interval={100}>...</TextLoop>;

Wobbly animation

text-loop-bouncy

<TextLoop springConfig={{ stiffness: 180, damping: 8 }}>...</TextLoop>;

For many other examples, please have a look at the CodeSandbox playground.

Contributing

Please follow our contributing guidelines.

License

MIT