React <> Spline trigger

This project is an example of basic integration between React and Spline - A toggle in Spline changes theme in React / Two buttons in React control a Spline animation. To edit the Spline scene download the .spline file and open it in Spline App, which is free to use.

Getting set up

1 - Install dependencies

run npm install

-or-

npm install @splinetool/react-spline @splinetool/runtime

npm install styled-components

2 - In the project directory, you can run:

npm start

Runs the app in the development mode.\

Open http://localhost:3000 to view it in the browser.

Explore / Edit Spline Scene

1 - Open the .spline file

Open the .spline file from the Spline_scene folder in Spline App.

** TRIGGER<>OBJECT LABELLING IN REACT AND SPLINE MUST CORRELATE **

2 - Export the scene in your Spline App as Code > React

Copy the scene URL from the Spline export window to the “scene” property in the Spline component, in App.tsx

Resources

Spline home / Spline app / Spline docs / Spline-React GitHub

React / React GitHub

styled-components npm / styled-components GitHub