Shadcn framer motion

[nimeshmaharjan1]

How do i integrate the button with framer motion because is no div has anyone tried this?

[midoriyaShonen441]

since, Shadcn was base on RadixUI maybe this solution, solve the problem.

https://codesandbox.io/s/radix-ui-framer-motion-p64hw

[McKayMower]

There's two ways i found out how to do it:

1. Wrap the component in a motion.div:

import {motion} from "framer-motion"
import {Button} from "@/components/ui/button" // or wherever your button is

<motion.div animate={{...}}>
  <Button>Your Button</Button>
</motion.div>

2. Make the button a motion component:

import {motion} from "framer-motion"
import {Button} from "@/components/ui/button" // or wherever your button is

const MotionButton = motion(Button);

<MotionButton animate={{...}}>
  // your content here
</MotionButton>

[amjido-01]

please can you explain it more.

[McKayMower]

my apologies, i didn't write the code in a code block. check the updated comment and see if that makes sense

[amjido-01]

OK, thank you so much.
Wrapping the button inside a motion.div works fine. ❤️

[Kinfe123]

can we config the native comp i,e the primitive's one - with out wrapping ot something like but still keeping it on server :)

[monsterswithink]

How do i integrate the button with framer motion because is no div has anyone tried this?

use Component not div

[bcmendis]

Wrapping the Button component with motion works, but creates unexpected behaviour when the asChild prop is enabled.

The animations don't trigger in a stable way, for me at least.

Anyone else facing the same issue? Any fixes?

[begalinsaf]

try to using lazy motion