Motion Highlight Motion highlight component that displays the motion highlight effect.
Made by imskyleen
< MotionHighlight > < div >Item 1</ div > < div >Item 2</ div > < div >Item 3</ div > </ MotionHighlight > By default, child items will have the highlight effect. This will map the children elements and surround them with the MotionHighlightItem element.
< MotionHighlight > < div >Item 1</ div > < div >Item 2</ div > < div >Item 3</ div > </ MotionHighlight > Using the controlledItems props, you place your MotionHighlightItem wherever you like in the MotionHighlight component.
< MotionHighlight controlledItems > < MotionHighlightItem >Item 1</ MotionHighlightItem > < div > < MotionHighlightItem >Item 2</ MotionHighlightItem > </ div > < MotionHighlightItem >Item 3</ MotionHighlightItem > </ MotionHighlight > By default, in mode with the value children the highlight is placed in the MotionHighlightItem component using Motion's layoutId technique. This technique should be preferred in most cases. However, in some cases, you may run into z-index problems, so it's best to use the parent mode to avoid visual bugs.
< MotionHighlight > < div >Item 1</ div > < div >Item 2</ div > < div >Item 3</ div > </ MotionHighlight > By using the mode property with the value parent, the MotionHighlight component will set the highlight to absolute in MotionHighlight. This may be useful in some cases to avoid the visual z-index bugs you can get with mode children.
< MotionHighlight mode = "parent" > < div >Item 1</ div > < div >Item 2</ div > < div >Item 3</ div > </ MotionHighlight > // With asChild < MotionHighlight > < MotionHighlightItem asChild > < div id = "item-1" >Item 1</ div > </ MotionHighlightItem > < MotionHighlightItem asChild > < div id = "item-2" >Item 2</ div > </ MotionHighlightItem > </ MotionHighlight > // Result < div className = "relative" id = "item-1" > < div /> { /* Highlight */ } < div className = "relative z-[1]" >Item 1</ div > </ div > < div className = "relative" id = "item-2" > < div /> { /* Highlight */ } < div className = "relative z-[1]" >Item 2</ div > </ div > // Without asChild < MotionHighlight > < MotionHighlightItem > < div id = "item-1" >Item 1</ div > </ MotionHighlightItem > < MotionHighlightItem > < div id = "item-2" >Item 2</ div > </ MotionHighlightItem > </ MotionHighlight > // Result < div className = "relative" > < div /> { /* Highlight */ } < div className = "relative z-[1]" id = "item-1" >Item 1</ div > </ div > < div className = "relative" > < div /> { /* Highlight */ } < div className = "relative z-[1]" id = "item-2" >Item 2</ div > </ div > // With asChild < MotionHighlight mode = "parent" > < MotionHighlightItem asChild > < div id = "item-1" >Item 1</ div > </ MotionHighlightItem > < MotionHighlightItem asChild > < div id = "item-2" >Item 2</ div > </ MotionHighlightItem > </ MotionHighlight > // Result < div className = "relative" > < div /> { /* Highlight */ } < div id = "item-1" >Item 1</ div > < div id = "item-2" >Item 2</ div > </ div > // Without asChild < MotionHighlight mode = "parent" > < MotionHighlightItem > < div id = "item-1" >Item 1</ div > </ MotionHighlightItem > < MotionHighlightItem > < div id = "item-2" >Item 2</ div > </ MotionHighlightItem > </ MotionHighlight > // Result < div className = "relative" > < div /> { /* Highlight */ } < div > < div id = "item-1" >Item 1</ div > </ div > < div > < div id = "item-2" >Item 2</ div > </ div > </ div >