https://github.com/react-component/texty

React Text Animate
https://github.com/react-component/texty

Last synced: 4 days ago
JSON representation

React Text Animate

• Host: GitHub
• URL: https://github.com/react-component/texty
• Owner: react-component
• License: mit
• Created: 2018-07-03T08:39:35.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2021-07-30T21:21:45.000Z (over 3 years ago)
• Last Synced: 2024-04-26T21:04:16.198Z (7 months ago)
• Language: TypeScript
• Homepage: https://react-component.github.io/texty/
• Size: 562 KB
• Stars: 154
• Watchers: 6
• Forks: 8
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • Changelog: HISTORY.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# rc-texty

---

React TextyAnim Component

[![NPM version][npm-image]][npm-url]

[![build status][travis-image]][travis-url]

[![codecov](https://codecov.io/gh/react-component/texty/branch/master/graph/badge.svg)](https://codecov.io/gh/react-component/texty)

[![npm download][download-image]][download-url]

[npm-image]: http://img.shields.io/npm/v/rc-texty.svg?style=flat-square

[npm-url]: http://npmjs.org/package/rc-texty

[travis-image]: https://img.shields.io/travis/react-component/texty.svg?style=flat-square

[travis-url]: https://travis-ci.org/react-component/texty

[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square

[node-url]: http://nodejs.org/download/

[download-image]: https://img.shields.io/npm/dm/rc-texty.svg?style=flat-square

[download-url]: https://npmjs.org/package/rc-texty

## Example

http://localhost:8010/examples/

online example: http://react-component.github.io/texty/

## install

[![rc-texty](https://nodei.co/npm/rc-texty.png)](https://npmjs.org/package/rc-texty)

## Usage

```js

var TextyAnim = require('rc-texty');

var React = require('react');

require('rc-texty/assets/index.css');

React.render(text, container);

```

## API

### props

| name      | type           | default   | description    |

|-----------|----------------|-----------|----------------|

| className | string         |  `null`   |  class name.   |

| prefixCls | string         |  `texty`  |  prefix class  |

| type      | string         |  `top`    |  animation style, 'left' \| 'right' \| 'top' \| 'bottom' \|'alpha' \| 'scale' \|  'scaleX' \| 'scaleBig' \| 'scaleY' \| 'mask-bottom' \| 'mask-top' \|  'flash' \| 'bounce' \| 'swing' \| 'swing-y' \| 'swing-rotate'. |

| mode      | string         |  `smooth` |  animate sport mode. 'smooth' \| 'reverse' \| 'random' \| 'sync' |

| duration  | number \| func | `450`     |  Except for special animation 'flash' \| 'bounce' \| 'swing' \| 'swing-y' \| 'swing-rotate'. one text animation duration |

| interval  | number \| func | `50`      |  animation interval, is function: (e: { key: string }) => number. Key is split text plus sequence(text-1). |

| delay     | number | `0`       |  animation overall delay.      |

| split     | func           | `null`    |  children split, return string |

### Inherit TweenOneGroup 

| name      | type           | default | description    |

|------------|----------------|---------|----------------|

| appear    |  boolean       |  true   |  whether support appear anim |

| enter     | object / array / func | `null` | enter anim twee-one data. when array is tween-one timeline, func refer to queue-anim  |

| leave     | object / array / func | `null` | leave anim twee-one data. when array is tween-one timeline, func refer to queue-anim  |

| onEnd     |  func          | -    | one animation end callback |

| animatingClassName | array | `['tween-one-entering', 'tween-one-leaving']` | className to every element of animating |

| exclusive   |  boolean   | false  | Whether to allow a new animate to execute immediately when switching. `enter => leave`: execute immediately leave |

| component | 	React.Element/String | div  |  component tag  | 

| componentProps | object  |  -  | component tag props |

## License

rc-texty is released under the MIT license.