🎉 Releasing Framer Motion Theatre, a library for creating animated React components. ⚡️ Use Theatre.js in React with a simple declarative API ⚡️ Animate Framer-motion's motion values using Theatre.js ⚡️ Get WYSIWYG editing for your components with 1 line of code 1/6

FMT lets you get the best of Theatre.js' sequencer and React's declarative API, animate Framer Motion's motion values using Theatre.js, and have all the complexity like sheets, objects, animation instancing and wiring taken care of. ➡️ GitHub: 2/6

🤔 How does it work? While Theatre.js provides a framework-agnostic toolset, its concepts map directly to React and Framer Motion. Sheets → React components Sheet instances → React component instances Objects → Framer Motion motion values 3/6

Using this interpretation, we can wrap Theatre's complexity in a simple declarative API that is very easy to read and write, integrates with Framer Motion's motion components, and allows us to easily add powerful WYSIWYG editing tools to our components. 4/6

Finally, let's look at the code for some fancy animated buttons. The Box component's animation is automatically instanced, we get WYSIWYG editing, Theatre's animation sequencer, and we don't have to write much more code than if we had used just Framer Motion!! 5/6

🥁 And this is what the code looks like. PS: If you'd like to work at a design driven company making the next generation of creative tools, we are hiring across the board at @LumaLabsAI. And if you'd like to help out with @theatre_js, @ariaminaei is looking for folks too! 6/6

@theatre_js @framer this is epic 🔥 cc @jornvandijk @ariaminaei

@theatre_js @framer cc @mattgperry

@theatre_js @framer Yooo!

@theatre_js @framer Oh, wow! 😲 This is literally what I was toying around with 😅 Any chance to collaborate? 🤔

@theatre_js @framer Haha awesome!! Of course, check out the GitHub link, second tweet!