Documentation

The complete guide to building high-performance, interactive SVG animations for the modern web.

Why Bandit Animation?

Traditional web animation is a struggle between performance and developer experience. Bandit Animation solves this by providing a visual interface to orchestrate complex SVG animations that export to clean, production-ready React code. No runtime bloat, no complex dependencies - just pure, optimized Framer Motion components.

Installation

Bandit Animation components are framework-agnostic but optimized for the React ecosystem. To get started, ensure your project is set up with the necessary dependencies.

Prerequisites

Our generated components rely on framer-motion for performant, hardware-accelerated animations.

npm install framer-motion

# or using yarn

yarn add framer-motion

How It Works

From static SVG to interactive React component in three simple steps. Streamline your workflow and bridge the gap between design and development.

Import & Parse

Upload your raw SVG file directly into the editor. Bandit automatically parses the DOM structure, identifying paths, groups, and shapes. No manual cleanup required - we handle the optimization for you.

Preserves layer hierarchy
Clean, semantic markup

Upload Interface

Visual Orchestration

Use the timeline to sequence your animations. Define specific states like Hover, Tap, and Initial. Tweak timing, easing curves, and properties with immediate visual feedback.

Interactive state management
Real-time preview

Timeline & Properties

Export & Integrate

Once your animation is perfect, hit export. You'll get a single .tsx file containing your self-contained component. Simply drop it into your application, and it works instantly.

<MyAnimatedIcon />

Export Modal

API Reference

Every generated component comes with TypeScript definitions and a standard set of props for easy customization.

Prop	Type	Description
size	number \| string	Controls the width and height of the SVG. Defaults to the original dimensions.
color	string	Overrides the fill or stroke color of the primary elements.
BETAclassName	string	Standard React className for adding custom styles or utility classes.
BETA...props	SVGProps	Passes through all standard SVG attributes (onClick, style, etc.).

Adding color attribute to the svg will override the color of the whole svg, if working with multiple colors, simply use the svg without the color attribute.

Examples

Basic Usage

Import and use just like any other React component.

import { AnimatedLogo } from './components/AnimatedLogo';

export default function App() {
  return (
    <div className="header">
      <AnimatedLogo size={48} />
    </div>
  );
}

Custom Styling

Override colors and add Tailwind/Bootstrap classes.

<AnimatedIcon 
  color="#a855f7"
  className="hover:scale-110 transition-transform"
  onClick={() => console.log('Clicked!')}
/>