Using Framer animations in production
Note: This article relates to Framer’s code features. Find out how to enable code features in your project.
Any interaction you create in Framer can be fully tweaked to your needs with the animation editor, enabling you to use your favorite bézier curves or to add the perfect spring animation with just the right amount of damping.
The Framer API powering this is built on top of our open-source production-ready library, Framer Motion.
As Motion powers Framer’s animation and gesture capabilities, converting prototypes into production-level code is greatly reduced since all your easings and interactions can be brought into production when you’re using Framer Motion.
Handing off animations
Whenever you create a transition in Framer, you can view the transition properties that were used by enabling Handoff mode from the top menu bar.
When Handoff is enabled, selecting the canvas element containing the transition will cause the right-hand Handoff panel to display all the set transition properties such as type of transition, stiffness, damping, and more.
As these transitions are powered by Framer Motion, they can be used directly in your production site or application.
Handing off animations on handoff panel
Using Framer Motion
Framer Motion is an open source React library, made to work seamlessly both with Framer and in production sites and applications. As is common with external dependencies, Motion can be installed directly from npm.
Since the animations you make in Framer may behave a little differently in a production environment, we’ve put together this guide to help you take the work you’ve done in Framer and bring it to production.