Framer
  • Support
  • Using Framer
Framer
  • Learn
    • Speedruns
    • Starter Kit
    • Examples
    • Tutorials
    • Sessions
  • Teams
    • Teams
    • Enterprise
  • Pricing
  • Blog
  • Updates
  • Support
  • Support
  • Using Framer

Related Articles

  • Animation Editor
  • What are these common Framer terms?
  • Can I put my components on Storybook?
  • Exporting Assets
  • Importing a React Design System

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.

Get started with Framer Motion

Helpful?Was this article helpful?

0

0

Framer

  • Updates
  • Pricing
  • Tutorials
  • Teams
  • Enterprise
  • Blog
  • Motion

Platforms

  • Web
  • macOS
  • iOS
  • Android
  • Figma Importing
  • Sketch Importing
  • User Testing
  • Desktop PrototypingNew

Resources

  • Examples
  • Sessions
  • SpeedrunsNew
  • Packages
  • Volt
  • API
  • State of Prototyping
  • Wireframing Tool
  • Mockup Tool
  • Dictionary

About

  • Loupe
  • Community
  • Company
  • Careers
  • Security

Support

  • Using Framer
  • Accounts
  • Contact

  • Twitter
  • Discord
  • Dribbble

Copyright © 2021 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement