Customizable 3D text hover animation. Created using Framer Motion. Respects user's Reduced Motion preferences. Visit the demo here, optimized for Desktop.
npm install --save rotating-texttext updates the content, ignoring spaces.
stagger gives you control over the time between each letter.
timing sets the duration of each letter animation. Timing can be a single numeric value OR a custom timing array, with a specific duration for each letter in the text (e.g. if text is OKAY, your custom timing array can look like [0.1, 0.4, 0.5, 0.1]).
You can use className and style to add further customization and styling.
import React, { Component } from 'react'
import RotatingText from 'rotating-text'
import 'rotating-text/dist/index.css'
function MyApp {
return (
<RotatingText
text="HOVERME"
stagger={0.1}
timing={0.5}
className="rotating-text"
styles={{ fontSize: '100px' }}
/>
)
}- Text wrapping is currently not supported. RotatingText works best with a single word or short phrase, as spaces are ignored.
MIT © jueungrace