
Security News
Meet Socket at Black Hat and DEF CON 2025 in Las Vegas
Meet Socket at Black Hat & DEF CON 2025 for 1:1s, insider security talks at Allegiant Stadium, and a private dinner with top minds in software supply chain security.
react-moving-text
Advanced tools
React Component to show animated text and objects, built with [styled-components](https://www.styled-components.com/).
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
Install via npm:
npm i react-moving-text
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>
)
}
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" | - |
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 |
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>
)
}
FAQs
React Component to show animated text and objects, built with [styled-components](https://www.styled-components.com/).
The npm package react-moving-text receives a total of 374 weekly downloads. As such, react-moving-text popularity was classified as not popular.
We found that react-moving-text demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Security News
Meet Socket at Black Hat & DEF CON 2025 for 1:1s, insider security talks at Allegiant Stadium, and a private dinner with top minds in software supply chain security.
Security News
CAI is a new open source AI framework that automates penetration testing tasks like scanning and exploitation up to 3,600× faster than humans.
Security News
Deno 2.4 brings back bundling, improves dependency updates and telemetry, and makes the runtime more practical for real-world JavaScript projects.