Skip to main content

TypingAnimation

Animates text with a typewriter effect, revealing characters one by one.

VEF-specific component. Not part of Ant Design.

Basic Usage

import { TypingAnimation } from '@vef-framework-react/components';

export default function Demo() {
return <TypingAnimation>Hello, I am VEF Framework!</TypingAnimation>;
}

With Delay

<TypingAnimation delay={500} duration={80}>
This text starts typing after 500ms...
</TypingAnimation>

Trigger on Scroll

<TypingAnimation startOnView>
This text types when it enters the viewport.
</TypingAnimation>

API

TypingAnimation extends all motion.div props, plus:

PropTypeDefaultDescription
childrenReactNodeText content
durationnumber100Delay between each character (ms)
delaynumber0Delay before animation starts (ms)
startOnViewbooleanfalseStart animation when element enters viewport
classNamestringCSS class
styleCSSPropertiesInline style