react-ts-typewriter alternatives and similar libraries
Based on the "UI Animation" category.
Alternatively, view ReactTypewriter alternatives based on common mentions on social networks and blogs.
-
react-spring
✌️ A spring physics based React animation library -
react-motion
A spring that solves your animation problems. -
framer/motion
Open source, production-ready animation and gesture library for React -
react-flip-move
Effortless animation between DOM changes (eg. list reordering) using the FLIP technique. -
react-router-transition
painless transitions built for react-router, powered by react-motion -
react-anime
✨ (ノ´ヮ´)ノ*:・゚✧ A super easy animation library for React! -
react-parallax-tilt
👀 Easily apply tilt hover effect on React components - lightweight/zero dependencies (3kB) -
react-gsap-enhancer
Use the full power of React and GSAP together -
React Native Circle Menu
:octocat: ⭕️ CircleMenu is a simple, elegant UI menu with a circular layout and material design animations. Reactnative library made by @Ramotion -
react-motion-ui-pack
Wrapper component around React Motion for easier UI transitions. -
gooey-react
The gooey effect for React, used for shape blobbing / metaballs (0.5 KB) 🧽 -
data-driven-motion
Easily animate your data in react -
react-spark-scroll
Scroll-based actions and animations for react -
react-mt-svg-lines
A React.js wrapper component to animate the line stroke in SVGs -
react-track
Track the position of DOM elements. Create cool animations. -
react-web-animation
React components for the Web Animations API - http://react-web-animation.surge.sh -
react-atv-img
A port of @drewwilson’s atvImg (Apple TV 3D parallax effect) library in React. -
react-transitive-number
React component to apply transition effect to numeric strings, a la old Groupon timers -
react-parallax-component
Easiest way to add scroll parallax effect on the component -
react-tween
DEPRECATED - Recommend https://github.com/tannerlinsley/react-move instead! -
react-animatable
Tiny(~1kB) animation hooks for React, built on Web Animations API. -
auto-size-transition
A component that scale dynamically according to the internal size -
react-scroll-rotate
Very simple react component for rotate element based on scroll position -
react-tsparticles
A lightweight component to easily create interactive particles animations -
anim-react
simple js react animation, animation hook, web Animation interface, onclick animation, onview,onsight animation, without css animation, no transition animation, js animation class usage.
SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
Do you think we are missing an alternative of react-ts-typewriter or a related project?
README
React Typewriter
React Typewriter is a simple component that allows you to create a nice "typewriter" effect to any text by simply invoking the component. Take a look in NPM.
Installation
npm i react-ts-typewriter
Example usage
import Typewriter from 'react-ts-typewriter';
export default function myComponent() {
return (
<h1>
<Typewriter text='Hello' />
</h1>
)
}
import Typewriter from 'react-ts-typewriter';
export default function myComponent() {
return (
<h1>
<Typewriter
text={['Hello', 'how', 'are', 'you?']}
delay={500}
loop={false}
/>
</h1>
)
}
Props
text : string | string[]
Text to display as string or an array of strings. Required
speed?: number = 30
How long (in ms) does the the typewriter wait after typing one character. Defaults to 30ms.
loop?: boolean = false
Set to true if the typewriter should loop after finishing typing the word(s). Defaults to false.
random?: number = 30
Ms of randomness that should be added after each keystroke. If set to zero then each stroke will strictly take speedms to complete. Defaults to 30ms.
delay?: number = 30
Ms to wait after compleating the word. Useless if loop is set to false or text is not an array. Defaults to 30ms.
cursor?: boolean = true
Set to false if the typewriter should not render a blinking cursor character at the end of the string. Defaults to true