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.
🚴 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.
⌘+K), and at least one instance of it (
Initialstate by connecting it to one of your component’s instances.
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).|
• 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.