⚠️ Magic Move is no longer supported, you should move to Switch. It’s really good.
Design interactive animated components. No code.
Magic Move 3 uses the power of Framer’s animation library to smoothly transition between variants of your design components using user-triggered events and powerful timing controls.
What’s New on 3.0
🚴 Connect multiple instances to a single event to cycle or toggle between states.
🤸 Three types of looping allow you to create fluid continuous animations, like spinners.
👯 Set staggerred delays to children to simulate natural movement.
- Create a design component (
⌘+K), and at least one instance of it (
- Double click on your instance to change the children’s properties you want to animate.
- Set Magic Move’s
Initialstate by connecting it to one of your component’s instances.
- Connect to other instances to set the states to be triggered by touch and mouse
- Open preview and marvel at your own interactive animated creation 🎩🐇
Animation is restricted to
Frames. You can wrap anything in a Frame (such as Text, Stacks, and any code component) to be able to animate its position, rotation and opacity.
|Automatic||On component render.|
|Tap||Tapping or clicking the component.||✅|
|Tap Start||Touching the component.||✅|
|Hover Start||Moving the mouse over the component.||✅|
|Hover End||Moving the mouse away from the component.||✅|
|Background||🌈 Animates between solid and gradient backgrounds.|
|Shadows||🔦 Animates any number of outer and inner shadows.|
|Delay||Delay all animations by set time (seconds).|
|Stagger||Animations of child Frames are staggered by this time (seconds).|
• Deprecation notice. See you next time 👋
• Fix animation of color variables.
Border animations temporarily.
• Fixed background images not being visible.
• Fixed gradient animation.
Hover Start, and
Hover End accept multiple instances for cycling.
• Added looping controls for
Stagger property to orchestrate children timing.
Shadow are now animatable.
Background animations now support gradients.
• Smoother frame rate on position and size transitions.
Tap End event, use
Tap instead for same effect.
• Redesigned empty state.
• Complete rewrite, a lot of bugs are gone, but there will be new ones. Report bugs
• Support for new events:
• Connected Frames are now previewed on Property Panel.
• Improved rendering speed to stop errors on the canvas.
• Parent Frame properties are now animatable:
• Initial release.
Opening Package in Framer X...
Don’t have Framer X yet?Start your Free Trial