A React component to use CSS animations to swap letters in 2 words which are an anagram of each other.

The text is animated in position after calculating initial and final positions of each letter.

How to use it:

1. Install and import the Anagram Animation component.

# Yarn
$ yarn add react-anagram-animation

# NPM
$ npm i react-anagram-animation

import React from 'react';
import Anagram from 'react-anagram-animation';

2. Add the Anagram component to the app and define an array of text to be animated

<Anagram words={['Word 1', 'Word 2', 'Word 3']} animationOptions={OPTIONS} />

3. Possible options to config the animation.

• randomStartMin: The minimum amount of time to randomly wait before starting to animate each letter
• randomStartMax: The maximum amount of time to randomly wait before starting to animate each letter
• randomReverseMin: The minimum amount of time to randomly wait before starting to animate each letter in reverse
• randomReverseMax: The maximum amount of time to randomly wait before starting to animate each letter in reverse
• loopAnimation: The amount of time for each full loop of the animation
• waitToStart: The amount of time to wait before beginning the animation on start up

{
  randomStartMin: 0,
  randomStartMax: 3000,
  randomReverseMin: 6000,
  randomReverseMax: 9000,
  loopAnimation: 12000,
  waitToStart: 0,
}

Preview:

Download Details:

Author: scottcanoni

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/scottcanoni/react-anagram-animation

License: MIT