- Notifications
You must be signed in to change notification settings - Fork63
Animate words in your headings
License
braposo/react-text-loop
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
An animated loop of text nodes for your headings. Usesreact-motion for the transition so it handles super fastanimations and spring params.
npm install react-text-loop oryarn add react-text-loop
You can also run the examples by cloning the repo and runningyarn start.
importTextLoopfrom"react-text-loop";importLinkfrom"react-router";import{BodyText}from"./ui";classAppextendsComponent{render(){return(<h2><TextLoop><span>First item</span><Linkto="/">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 | Disablewhitepace: 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 forreact-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 sodoing 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 foreach node.
<TextLoopchildren={["Trade faster","Increase sales","Stock winners","Price perfectly"]}/>;
<TextLoopinterval={100}>...</TextLoop>;
<TextLoopspringConfig={{stiffness:180,damping:8}}>...</TextLoop>;
For many other examples, please have a look at theCodeSandbox playground.
Please follow ourcontributing guidelines.
About
Animate words in your headings
Topics
Resources
License
Code of conduct
Contributing
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors5
Uh oh!
There was an error while loading.Please reload this page.