Hey everyone - important update today! We just launched Magic Motion V1 🧙🏼♀️in Framer Web, which empowers you to start animating without code ✨
How does it work?
You might have used Magic Move by Gusso before, so Magic Motion works in a similar fashion, but natively, and without trademark infringement: You just draw the different states, connect them with Magic Motion and Framer animates it for you! You can also customize the animation with the animation controls ;)
Moreover, Magic Motion is powered by Framer Motion 2, so handoff is as simple as writing the word magic!
How do I get started?
You can simply use it in any existing or new web project. Here is a simple example for you to get understand how it works: https://beta.framer.com/projects/Magic-Demo-4axSVeq8I1HqhfaN9Ska
Note: Always check layer names
Magic Motion has a lot of intelligence built in that enables it to determine the best way to animate from one state to another. Sometimes this may not work as expected, and this is usually due to layer names changing. If you see weird behaviour with transitions, ensure you have consistent layer names between screens so magic motion can do a more effective job of animating between the different states
This covers one of our most requested features: prototyping without code ✨
Let us know what you think and if there is anything you love or think it’s missing, just write it down in the #web-beta channel in our public slack!
Enjoy & stay safe!