https://github.com/rudrodip/svg-pan-animation

Interactive SVG Pan Animation inspired from Linear
https://github.com/rudrodip/svg-pan-animation

framer-motion nextjs svg svg-animations

Last synced: about 2 months ago
JSON representation

Interactive SVG Pan Animation inspired from Linear

• Host: GitHub
• URL: https://github.com/rudrodip/svg-pan-animation
• Owner: rudrodip
• License: mit
• Created: 2024-07-12T07:46:21.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-07-15T15:48:17.000Z (7 months ago)
• Last Synced: 2024-12-01T13:49:54.676Z (about 2 months ago)
• Topics: framer-motion, nextjs, svg, svg-animations
• Language: TypeScript
• Homepage: https://svg-pan-animation.vercel.app
• Size: 1.01 MB
• Stars: 9
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Interactive SVG Pan Animation

> [!NOTE]

> This demo was inspired from [Linear](https://linear.app/plan). I wanted to create a similar effect using SVG and Framer Motion.

**Live link**: [svg-pan-animation.vercel.app](https://svg-pan-animation.vercel.app)

[![demo](.github/assets/demo.gif)](https://svg-pan-animation.vercel.app/)

## Tech

- Next.js

- Framer Motion

## How it works

- make a container div

- render the svg

- transform the container div: `rotateX(someDeg)`

- transform the svg to your needs

- add `motion` to the svg

- add `onPan` event listener to the svg

- update the svg's `rotateZ` value accordingly

- and tada!! 🎉

## Get started

> [!IMPORTANT]

> You can use any package manager you like. I'm using `bun` here.

```bash

# clone the repo

git clone https://github.com/rudrodip/svg-pan-animation.git

cd svg-pan-animation

# install dependencies

bun install

# run the dev server

bun run dev

```

## License

This project is licensed under the MIT License - see the [LICENSE](./LICENSE.md) file for details.