https://github.com/littlee/react-shuffle-text

React component that apply shuffle animation to text
https://github.com/littlee/react-shuffle-text

animation react react-component

Last synced: 5 days ago
JSON representation

React component that apply shuffle animation to text

• Host: GitHub
• URL: https://github.com/littlee/react-shuffle-text
• Owner: littlee
• Created: 2018-07-13T09:37:37.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-25T20:06:36.000Z (almost 2 years ago)
• Last Synced: 2024-08-10T08:16:30.804Z (3 months ago)
• Topics: animation, react, react-component
• Language: JavaScript
• Size: 1.85 MB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 25
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React Shuffle Text

![Preview](https://github.com/littlee/react-shuffle-text/blob/master/demo/preview.gif?raw=true)

## Basic Usage

install:

```

npm install -S react-shuffle-text

```

render:

```js

import ShuffleText from 'react-shuffle-text';

// somewhere in render function

```

custom styles & effects:

```css

/* write styles for .shuffle-text-char with higher specificity */

.my-shuffle .shuffle-text-char {

  animation: 0.5s ease-in-out both myWordEnter; /* none for no effect */

}

@keyframes myWordEnter {

  0% {

    opacity: 0;

    transform: translate(-100%, 0) scale(5);

  }

  100% {

    opacity: 1;

    transform: translate(0, 0) scale(1);

  }

}

```

## Available Props

- content: PropTypes.string.isRequired

  - text wanted to display

- charIncInterval: PropTypes.number (default: 100)

  - character increasing time interval 

- charFrames: PropTypes.number (default: 10)

  - frame counts that each character plays

- charFrameTime: PropTypes.number (default: 50)

  - duration of each character frame

- more props are coming