Question for the folks using Framer in a professional workflow. How do you deal with making sure the animation is translated perfectly in production?
In the case of web apps, how do you bridge the gap between framer code and production code?
Can production code somehow utilize the Framer animation engine so that we can get a seamless transition into the real product?
How are you guys dealing with this?
I'm asking the same question myself
It's pretty much the same issue we've had using After Effects for showing animation... it's trial-and-error working with the iOS (or Android) devs to duplicate the motion. I doubt we'll have a way to automate this process anytime soon..would be nice tho ;)
There is no reason this couldn't be fully integrated but today we're far from that. Some things that help is that Framer likely works the same way as your production UI framework (layers, nested views), and you can re-use the inputs like positions and sizes.
You can also re-use the variables for animations with bezier and linear curves. For spring curves, you can re-use the input with POP with these formulas: https://gist.github.com/koenbok/e9a0f7d763ac28eda880
one of the things i've found (just today) was that its easier if I'm working with bezier curves, since they are available in most animation libraries. Spring animation is harder, since then you have to try and replicate them via other methods.
Koen Bok - Thanks for your insights. Yeah. Even the way you write framer code is so simple. Being able to use that in real html elements would be amazing. Keep up the good work. Once a bridge is built, I think Framer will change the way we build web apps forever.
Tarun - This is a fantastic tip.