🌀 ganimation_package

A lightweight, type-safe TypeScript package for animating SVG path transitions using flubber and framer-motion in React. Interpolate smoothly between any number of SVG states with minimal setup.

✨ Key Features

• Smooth Shape Morphing: Automatically interpolates (morphs) between different SVG paths using flubber.
• Smart Transitions: Handles paths appearing and disappearing gracefully by animating opacity.
• Fully Customizable: Control duration, ease, and loop settings.
• High Performance: Uses framer-motion's useTransform to animate outside the React render cycle.
• Type-Safe: Written in TypeScript with strict definitions.

📦 Installation

Install the package and its peers:

npm install ganimation_package
npm install react react-dom framer-motion flubber

🚀 Quick Start

import React from 'react';
import { InterpolatedSvgsAnimation } from 'ganimation_package';
import { svgs } from './mySvgs';

export function App() {
  return (
    <div style={{ width: 200, height: 200 }}>
      <InterpolatedSvgsAnimation
        svgs={svgs}
        duration={3}
        ease="easeInOut"
        loop={true}
        fill="#1E40AF"
        className="rounded-2xl shadow-lg"
      />
    </div>
  );
}

🛠️ API Reference

| Prop | Type | Default | Description | | ----------- | ---------------------- | :--------: | -------------------------------------------------------------------- | | svgs | AnimationSvgs | ✅ | Array of SVG states (frames) to interpolate between. | | duration | number | 5 | Total duration of one full animation cycle in seconds. | | ease | string | number[] | "linear" | Easing function (e.g., "easeInOut", "circOut", or bezier array). | | loop | boolean | true | Whether the animation should loop infinitely. | | fill | string | – | Override fill color for all paths. | | className | string | – | CSS classes for the wrapper <div>. |

🔧 Hooks & Utilities

• useMergedPaths(svgs: AnimationSvgs): Record<string, SvgPath> Returns a map of every unique path by id, using the first occurrence.

• useInterpolators(svgs: AnimationSvgs): Array<Record<string,(t:number)=>string>> Pre-computes flubber interpolation functions for each transition segment.

• Helpers in src/utils/svgHelpers.ts:

  • mergePaths(svgs: AnimationSvgs)
  • createInterpolators(svgs: AnimationSvgs)

📂 Project Structure

ganimation_package/
├─ src/
│  ├─ components/
│  │   └─ InterpolatedSvgsAnimation.tsx
│  ├─ hooks/
│  │   ├─ useMergedPaths.ts
│  │   └─ useInterpolators.ts
│  ├─ types.ts
│  ├─ utils/
│  │   └─ svgHelpers.ts
│  └─ index.ts
├─ sample/
│   └─ sampleSvgs.ts
├─ README.md
├─ package.json
├─ tsconfig.json
└─ .npmignore

👥 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b my-feature)
3. Commit your changes (git commit -m "feat: ...")
4. Push to your branch (git push origin my-feature)
5. Open a Pull Request

📜 License

MIT © Ghassen Abida && WAHIB MKADMI