https://github.com/devpika/r3f-curve-anim
A React-Three-Fiber app to create animations along a curve
https://github.com/devpika/r3f-curve-anim
gsap react-three-fiber threejs valtio
Last synced: 8 months ago
JSON representation
A React-Three-Fiber app to create animations along a curve
- Host: GitHub
- URL: https://github.com/devpika/r3f-curve-anim
- Owner: DevPika
- License: gpl-3.0
- Created: 2024-08-06T19:29:11.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-08-25T14:44:59.000Z (about 1 year ago)
- Last Synced: 2025-02-01T10:51:09.683Z (8 months ago)
- Topics: gsap, react-three-fiber, threejs, valtio
- Language: JavaScript
- Homepage: https://devpika.github.io/r3f-curve-anim/
- Size: 612 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# R3F Curve Animation
## Features
* Nodes with configurable position, scale, rotation and color
* Left click on a node to select it and show Gizmos around it
* Right click on a node to cycle through Gizmo modes (translation, rotation and scale)
* Animated 3D object follows a smooth curve
* Mesh transform and color are interpolated throughout the curve
* Orbit Controls to looks around the scene
* Buttons to add and remove nodes, play animation and Color Pickers to change node colors
## Tech stack
* React
* Three.js
* React Three Fiber
* React Drei helpers
* GSAP for animations
* [Valtio](https://valtio.pmnd.rs/) for [mutable state management](https://docs.pmnd.rs/zustand/getting-started/comparison#valtio)
* [Leva](https://github.com/pmndrs/leva) for floating UI
## Building
```sh
$ git clone git@github.com:DevPika/r3f-curve-anim.git
$ cd r3f-curve-anim
$ npm install
$ npm run dev
```
Visit [http://localhost:5173/](http://localhost:5173/) after dev server boots up.
## Based on
* "Vite + React" template
* [r3f Transform Controls example](https://codesandbox.io/s/btsbj)