667f9d4fa2
Remove cold derivation reads Prior to this commit, the first render of every `useDerivation()` resulted in a cold read of its inner derivation. Cold reads are predictably slow. The reason we'd run cold reads was to comply with react's rule of not running side-effects during render. (Turning a derivation hot is _technically_ a side-effect). However, now that users are animating scenes with hundreds of objects in the same sequence, the lag started to be noticable. This commit changes `useDerivation()` so that it turns its derivation hot before rendering them. Freshen derivations before render Previously in order to avoid the zombie child problem (https://kaihao.dev/posts/stale-props-and-zombie-children-in-redux) we deferred freshening the derivations to the render phase of components. This meant that if a derivation's dependencies changed, `useDerivation()` would schedule a re-render, regardless of whether that change actually affected the derivation's value. Here is a contrived example: ``` const num = new Box(1) const isPositiveD = prism(() => num.derivation.getValue() >= 0) const Comp = () => { return <div>{useDerivation(isPositiveD)}</div> } num.set(2) // would cause Comp to re-render- even though 1 is still a positive number ``` We now avoid this problem by freshening the derivation (i.e. calling `der.getValue()`) inside `runQueue()`, and then only causing a re-render if the derivation's value is actually changed. This still avoids the zombie-child problem because `runQueue` reads the derivations in-order of their position in the mounting tree. On the off-chance that one of them still turns out to be a zombile child, `runQueue` will defer that particular `useDerivation()` to be read inside a normal react render phase. |
||
|---|---|---|
| .github | ||
| .husky | ||
| .vscode | ||
| .yarn | ||
| compatibility-tests | ||
| contributing | ||
| devEnv | ||
| examples | ||
| packages | ||
| scripts | ||
| theatre | ||
| .editorconfig | ||
| .eslintrc.js | ||
| .gitignore | ||
| .prettierignore | ||
| .prettierrc | ||
| .yarnrc.yml | ||
| babel.config.js | ||
| CHANGELOG.md | ||
| CONTRIBUTING.md | ||
| credits.txt | ||
| jest.config.js | ||
| lerna.json | ||
| LICENSE | ||
| package.json | ||
| README.md | ||
| REMOVEME.md | ||
| tsconfig.base.json | ||
| wallaby.conf.js | ||
| yarn.lock | ||
Motion Design, for the web
✨ Update: We're hiring – join the core team!
Theatre.js is an animation library for high-fidelity motion graphics. It is designed to help you express detailed animation, enabling you to create intricate movement, and convey nuance.
Theatre can be used both programmatically and visually.
You can use Theatre.js to:
-
Animate 3D objects made with THREE.js or other 3D libraries
Art by drei.lu
-
Animate HTML/SVG via React or other libraries
-
Design micro-interactions
-
Choreograph generative interactive art
-
Or animate any other JS variable
Documentation and Tutorials
The docs are at docs.theatrejs.com:
- Getting started guide
- In depth guide
- API docs
- Extensions
- Video tutorials
- Crash course
- Animating with music
- Yuri Artiukh's stream with a section on using Theatre with THREE.js
- <Add your own tutorials here>
Community and support
Join our friendly community on Discord, follow the updates on twitter or write us an email.
Development and contributing
If you want to change the source of Theatre, have a look at the guide here.
Proposing fixes and changes
You can always get help with bugfixes or discuss changes with our community on Discord, or directly open an issue on Github.
Helping with outstanding issues
Feel free to chime in on any issue. We have also labeled some issues with "Help wanted" or "Good first issue" if you're just getting started with the codebase.
Helping with documentation
The documentation website's repo is here.
Writing/recording tutorials
If you make tutorials or video content about Theatre, tell us to showcase it here :)
License
Your use of Theatre.js is governed under the Apache License Version 2.0:
- Theatre's core (
@theatre/core) is released under the Apache License. Same goes for most packages in this repository. - The studio (
@theatre/studio) is released under the AGPL 3.0 License. This is the package that you use to edit your animations, setup your scenes, etc. You only use the studio during design/development. Your project's final bundle only includes@theatre/core, so only the Apache License applies.