logo

Framer Motion

Parent Element
1. Child element
2. Child element
3. Child element

Propagation: Variants will flow down to children elements. No need to have animate prop on child element. Animation target/state is determined by the parent element.

Orchestration: we can take propagation a step further by controlling the timing of child animations using transition props: when & delayChildren. e.g. transition: { when: "beforeChildren", delayChildren: stagger(0.3), // Stagger children by .3 seconds }

Build by Ritesh. Check out my other Github Codes.