search

theatre-js / theatre

Motion design editor for the web
https://www.theatrejs.com
Apache License 2.0
10.86k stars 338 forks source link

Using Theatrejs for React (not R3F) #428

Open oallouch opened 11 months ago

oallouch commented 11 months ago

Hi,

I was very surprised to see the docs show how to use this lib with R3F, Three.js or plain HTML, but nothing for React. Worse, the example https://github.com/theatre-js/theatre/blob/main/examples/dom-cra/src/App.js triggers a render at each frame. Animating outside of the render engine is the main goal of every animation library. To move a simple div, do we have to use a ref and set manually its transform property (like we would with any HTML component) ? Do you plan to add an editable.div-like notation ?

Note that I react this way because I think the project could be huge, and not only for R3F, which I know and love.

Thx,

Olivier

clementroche commented 9 months ago

https://github.com/studio-freight/satus/blob/main/libs/theatre/index.js

This can be helpful, i faced the same issue. Thank to those hooks/context you can use theatre whenever you want in your app

oallouch commented 9 months ago

Exactement, Clément. I also coded those, and a TheatreDiv that manages "translate" and "opacity".