reactjs

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

Oct 10, 2021
A React component to use CSS animations to swap letters in 2 words which are an anagram of each other

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

View Demo View Github

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={{ waitToStart: 5000, randomStartMin: 0, randomStartMax: 0, randomReverseMin: 6000, randomReverseMax: 6000, loopAnimation: 20000, }} />

If you are using an embedded font and need to wait for it to load before animating, then you should specify the font family name and/or other font specifics.

<Anagram family="Open Sans" /> <Anagram family="Roboto" weight="600" style="italic" stretch="expanded" />

API

Props

PropTypeDefaultDescription
wordsarray['React Anagram Animation', 'Magenta Raincoat Airman']An array containing exactly 2 words which are an anagram of each other.
animationOptionsobjectAnimationOptionsTiming options for when to start, how fast to animate forwards, backwards, and when to loop (optional).
fontToObserveobjectFontToObserveA description of an embedded font to observe and wait until loaded. If not specified, animation will loaded immediately (optional).

AnimationOptions

PropertyTypeDefaultDescription
randomStartMinnumber0The minimum amount of time to randomly wait before starting to animate each letter
randomStartMaxnumber3000The maximum amount of time to randomly wait before starting to animate each letter
randomReverseMinnumber6000The minimum amount of time to randomly wait before starting to animate each letter in reverse
randomReverseMaxnumber9000The maximum amount of time to randomly wait before starting to animate each letter in reverse
loopAnimationnumber12000The amount of time for each full loop of the animation
waitToStartnumber0The amount of time to wait before beginning the animation on start up

FontToObserve

This object is passed along to Font Face Observer

PropertyTypeDescription
familystringThe font-family: Roboto, Inter, Open Sans, etc
weightstring or numberThe font-weight: normal, bold, 800, etc
stylestringThe font-style: normal, italic, oblique
stretchstringThe font stretch: normal, condensed, expanded, etc

Styling

You can use the CSS transition property to adjust the speed and duration of the animation completely. Can you find a neat transition animation? Please share! :)

.anagram-swap .word .letter { transition: all, 2s, cubic-bezier(0.1, 0.7, 1.0, 0.1), 2s; }

Run Locally

To run demo locally:

  • yarn
  • yarn start

and a browser will open to the demo.

Future Ideas

  • Animate between more than 2 words.
  • Animate non-anagram words.
  • Supply different animation easing.

License

WTFPL

Recommended