🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

react-moving-text

Package Overview
Dependencies
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-moving-text

React Component to show animated text and objects, built with [styled-components](https://www.styled-components.com/).

0.0.7
latest
npm
Version published
Weekly downloads
513
14.25%
Maintainers
1
Weekly downloads
 
Created
Source

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

PropertyCorresponding Animation PropertyData TypeDefault ValueProperty Unit
typeanimation-nameString"blur"-
durationanimation-durationString"1s"s or ms
delayanimation-delayString"0s"s or ms
directionanimation-directionString"alternate"-
timinganimation-timing-functionString"ease"-
iterationanimation-iteration-countNumber String"infinite"-
fillModeanimation-fill-modeString"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

FAQs

Package last updated on 02 Mar 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts