Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yashm20/svg-animator
✨ Bring your text to life with beautiful SVG animations! 🎨 A lightweight library for creating stunning SVG text animations with ease.
https://github.com/yashm20/svg-animator
Last synced: about 2 months ago
JSON representation
✨ Bring your text to life with beautiful SVG animations! 🎨 A lightweight library for creating stunning SVG text animations with ease.
- Host: GitHub
- URL: https://github.com/yashm20/svg-animator
- Owner: YashM20
- Created: 2024-10-29T13:23:55.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2024-11-07T06:41:29.000Z (2 months ago)
- Last Synced: 2024-11-07T07:31:19.739Z (2 months ago)
- Language: TypeScript
- Size: 105 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# @reactopia/svg-animator 🎨✨
A professional SVG text animation library with React support. Create stunning text animations with ease!
[](https://www.npmjs.com/package/@reactopia/svg-animator)
[](https://opensource.org/licenses/MIT)
## 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:
```bash
pnpm add @reactopia/svg-animator
```
Using npm:
```bash
npm install @reactopia/svg-animator
```
Using bun:
```bash
bun add @reactopia/svg-animator
```
### Basic Example
```tsx
import { AnimatedText } from '@reactopia/svg-animator';
const App = () => {
return (
);
}
```
### With Custom Animation
```tsx
import { AnimatedText } from '@reactopia/svg-animator';
const App = () => {
return (
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 |
## Supported Fonts
- Pinyon Script
- Dancing Script
- Pacifico
## Browser Support
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## License
MIT © [Yash Mahajan](https://github.com/YashM20)
## Support
If you like this project, please consider supporting it by:
- ⭐ Starring the repository
- 🐛 Reporting bugs
- 🔥 Contributing to the code
- ☕ [Buying me a coffee](https://ko-fi.com/yash_mhj)