You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

react-moving-text

Package Overview
Dependencies
1
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

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/).


Version published
Maintainers
1
Created

Readme

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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc