Reflex Motion

A Reflex wrapper for Framer Motion, a production-ready motion library for React.

Installation

pip install reflex-motion

Usage

Right now Reflex Motion is a simple wrapper around Framer Motion. It provides a single component, motion, which is a drop-in replacement for motion.div from Framer Motion.

motion(
    rx.button(
        "Bounce me!",
    ),
    while_hover={"scale": 1.2},
    while_tap={"scale": 0.9},
    transition={"type": "spring", "stiffness": 400, "damping": 17},
)

There are a few different props motion supports:

Props

inital: The initial state of the animation. This is the state the animation will start in when the component is first rendered.

animate: The state the animation will end in. This is the state the animation will end in when the component is first rendered.

while_hover: The state the animation will be in while the user is hovering over the component.

while_tap: The state the animation will be in while the user is tapping on the component.

while_in_view: The state the animation will be in while the component is in view.

while_focus: The state the animation will be in while the component is focused.

Animation Props

Additionally you can pass in any Reflex style prop (css prop).

Transitions

transition: The transition to use when animating between states. This can be a single transition or an array of transitions.

Additonally you can pass in any of the Animation Props and Reflex style prop (css prop).

Examples

Transition

motion( 
    rx.button(
        "Spin me!",
        variant="soft",
    ),
    initial={"scale": 1},
    while_hover={"scale": 1.2, "rotate": 45},
    while_tap={"scale": 0.9},
    transition={"type": "spring", "stiffness": 260, "damping": 20},
)