react-moving-text

react-moving-text

React Component to show animated text and objects, built with styled-components.

The Component provides regular animation for common object and some animation effects especially for typography like letters and multi-line text.

View Demo and Playground

Installation

Install via npm:

npm i react-moving-text

Usage

To use react-moving-text in your react project, wrap the content with a MovingText component and customize the animation with relevant properties.

import React from 'react'
import MovingText from 'react-moving-text'

const MyAnimatedTypo = () => {
  return (
    <MovingText
      type="animation_type"
      duration="1000ms"
      delay="0s"
      direction="normal"
      timing="ease"
      iteration="infinite"
      fillMode="none">
      Content...
    </MovingText>
  )
}

Available properties

Property	Corresponding Animation Property	Data Type	Default Value	Property Unit
type	animation-name	String	"blur"	-
duration	animation-duration	String	"1s"	s or ms
delay	animation-delay	String	"0s"	s or ms
direction	animation-direction	String	"alternate"	-
timing	animation-timing-function	String	"ease"	-
iteration	animation-iteration-count	Number String	"infinite"	-
fillMode	animation-fill-mode	String	"none"	-

Available animations

type / Animation name
blur
fadeIn
fadeOut
hang
hangOnLeft
hangOnRight
swing
glowing
shakeMix
shakeHorizontal
shakeVertical
spin
bounce
flipCenterToRight
flipFromLeftToCenter
flash
pulse
jelly
squeezeHorizontal
squeezeVertical
flipHorizontal
flipVertical

Chain Animation

An string-arry of animation names is used to wrap the animations you want to chain.

import React, { useState } from 'react'
import MovingText from 'react-moving-text'

const AnimationsForChaining = ["swing", "flipSlowDown", "fadeOutToBottom", "jelly"]

const AnimationChain = () => {

  const [ animationIndex, setAnimationIndex ] = useState(0)
  const [ animationType, setAnimationType ] = useState(AnimationsForChaining[0])

  const handleChainAnimation = () => {
    setCounter(animationIndex+1)
    setAnimationType(selectedItems[animationIndex+1])
  }

  return (
    <MovingText
      onAnimationEnd={handleChainAnimation}
      type={animationType}
      duration="1000ms"
      timing="linear"
      iteration={1}>
      MovingText
    </MovingText>
  )
}

License