Swap Letters In 2 Words - React Anagram Animation

Description:

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.

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,
}