An animated loop of text nodes for your headings. Uses react-motion for the transition so it handles super fast animations and spring params.
npm install react-text-loop or yarn add react-text-loop
You can also run the examples by cloning the repo and running yarn start.
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> ); } }| 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) |
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"]} />;
<TextLoop interval={100}>...</TextLoop>;
<TextLoop springConfig={{ stiffness: 180, damping: 8 }}>...</TextLoop>;For many other examples, please have a look at the CodeSandbox playground.
Please follow our contributing guidelines.