react-anagram-animation v1.4.0

React Anagram Animation

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.

Install

yarn add react-anagram-animation

or

npm install react-anagram-animation

Demo

DEMO

CodeSandbox

Usage

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

export default function MyComponent() {
    return (
        <Anagram words={['React Anagram Animation', 'Magenta Raincoat Airman']} />
    );
}

To control the animation speed and timing, you can pass an object of animationOptions.

<Anagram animationOptions={{
    randomStartMin: 0,
    randomStartMax: 0,
    randomReverseMin: 6000,
    randomReverseMax: 6000,
    loopAnimation: 20000,
    waitToStart: 5000,
    transitionDuration: 2000,
    timingFunction: 'ease-in-out',
}} />

If you are using an embedded font and need to wait for it to load before animating, then you should specify the fontToObserve property with the font family name.

<Anagram fontToObserve="Open Sans" />

<Anagram fontToObserve="Roboto" />

API

Props

AnimationOptions

All time values are in # of milliseconds. The randomness allows a nice jumble effect. You can use any values you want to create some fascinating animations.

Run Locally

To run demo locally:

• yarn
• yarn start

and a browser will open to the demo.

If you receive Invalid hook call errors because you are linking this module, you may need to point this library's React to your app's installed React so there is only one copy.

npm link ../my-app/node_modules/react
npm link ../my-app/node_modules/react-dom

Future Ideas

• Animate between more than 2 words.
• Animate non-anagram words. Done.

License

WTFPL