@reactopia/svg-animator NPM

@reactopia/svg-animator 🎨✨

A professional SVG text animation library with React support. Create stunning text animations with ease!

Features

🚀 Lightweight and performant
⚛️ React-first design
🎯 Full TypeScript support
🔄 SSR compatible
🎨 Customizable animations
📦 Simple API
🎭 Built-in font support
👀 Intersection Observer support

Installation

Using pnpm:

pnpm add @reactopia/svg-animator

Using npm:

npm install @reactopia/svg-animator

Using bun:

bun add @reactopia/svg-animator

Basic Example

import { AnimatedText } from '@reactopia/svg-animator';

const App = () => {
  return (
    <AnimatedText
      text="Hello World!"
      font="Pinyon Script"
      textConfig={{
        x: "50%",
        y: "50%",
        textAnchor: "middle",
        dominantBaseline: "middle",
        fontSize: "48px"
      }}
    />
  );
}

With Custom Animation

import { AnimatedText } from '@reactopia/svg-animator';
   
const App = () => {
 return (
   <AnimatedText
     text="Animated Text"
     font="Dancing Script"
     textConfig={{
       x: "50%",
       y: "50%",
       textAnchor: "middle",
       fontSize: "64px"
     }}
     animationConfig={{
       duration: 3000,
       delay: 500,
       strokeColor: "#ff0000",
       fillColor: "#000000",
       strokeWidth: 2
     }}
     onAnimationStart={() => console.log('Animation started')}
     onAnimationEnd={() => console.log('Animation completed')}
   />
 );
}

Configuration Options

TextConfig

Property	Type	Default	Description
x	string \| number	required	X coordinate of the text
y	string \| number	required	Y coordinate of the text
fontSize	string	undefined	Font size of the text
textAnchor	'start' \| 'middle' \| 'end'	undefined	Text anchor alignment
dominantBaseline	'auto' \| 'middle' \| 'hanging'	undefined	Vertical text alignment

AnimationConfig

Property	Type	Default	Description
duration	number	2000	Animation duration in milliseconds
delay	number	0	Delay before animation starts
easing	string	'ease'	CSS animation timing function
iterations	number	1	Number of animation iterations
direction	'normal' \| 'reverse' \| 'alternate' \| 'alternate-reverse'	'normal'	Animation direction
fillMode	'none' \| 'forwards' \| 'backwards' \| 'both'	'forwards'	CSS animation fill mode
strokeWidth	number	2	Width of the text stroke
strokeColor	string	'#000000'	Color of the text stroke
fillColor	string	'#000000'	Fill color of the text