This error just started happening randomly: However if I make a wrapping component that spreads props and introduces children there's no error: const WorkingVersion = (props: {id?: number}) => ...

I'm trying to make a page transition with Next.js v14 but no success. No error is shown, the animation just does't work. I guess it's because the layout.tsx is rendered on the server. But how can I...

So I´m currently refactoring a website, and so I do with the rrd, which was on v5 in the previous website version. Now, that the component doesn´t exist anymore we have to work with the new compone...

I know that I can apply motion directly to element/HTMLtag like this: <motion.div>some content</div> But how can I apply it to this? <Comp /> Without wrapping it inside another ...

How can I animate a pure number from 0 to 100 with a transition config? <motion.div> {num} </motion.div>

I am working on a React project where I have components animate in when they scroll in to view. I am using Framer Motion. How can I make it so the animation only triggers the first time you scroll ...

When am trying to do simple animation for div using framer motion. Am getting this following error in browser /node_modules/framer-motion/dist/es/components/AnimatePresence/index.mjs Can't import t...

How do I use a Framer Motion tag, and in the animate and initial props, Apply a class. Like so. <motion.div initial={{ className: 'hidden' }} animate={{ className: 'visible' }} > <div&g...

I thought on ever render framer motion would re-do my animation because the inital is set to hide and the animate is set to show. But this is not the case. How can I get this to re-play the animati...

How to use tailwind css classes into framer motion objects.. const variant = { hidden: { 'w-0' }, visible: { width: 400, transition: { type: 'spring', stiffness: 170, damping:30, } } } ...

Pre Next v.13 (app dir) you could do something like: useEffect(() => { const handleRouteChangeComplete = () => { methodToCall() } // Add the event listener for 'routeChangeComplete' ro...

Is there any built-in way to make the animation start when the element is in-view (for example, when we scroll to the element)? Framer Motion has mount animations section which says: When a com...

Using framer motion I want to animate my Icon component to rotate 90 degrees when hovering at the parent element which is a button. <motion.button type="button" whileHover={{scale: 1.1}}&gt...

I'm using Framer Motion's useViewportScroll hook to track the user's scroll on my page, but it isn't updating. I came across this article, which explains how Framer Motion uses document.body.client...

I just want to know if there is a way to use framer-motion with Material-Ui. I tried but I am not getting it.

How can I achieve a different type of transition for an exit property in Framer Motion? <motion.div initial={{opacity: 0, transform: 'scale(0.5)'}} animate={{opacity: 1, transform: 'scale(1)'}...

I'm working with Framer-motion and i'm trying to find a way to delay the the animation of rotateY while the x animates to a specific position then start the rotateY. Is this possible in Framer mo...

I am making app with framer motion and I need to drag svg inside another svg but my problem is that viewbox size is not equal to window size so when I drag element my 1px movement of mouse on the s...

Using Framer Motion's useTransform I want to change the width of an element using a MotionValue that is a percent (eg. 75%) rather than in pixels. The default assumes pixels: <motion.div class...

I'm wondering if there is a way, and how can it be achieved, to pin an element in a gsap manner but with FRAMER MOTION. In order to do something just like that : https://codepen.io/hexagoncircle/pe...

Please see this codesandbox. I have a basic framer-motion animation where the height of a box is animated when toggled. However, I want the box to be shown by default, but when the page loads the i...



I recently jumped the gun on upgrading to the latest react-router-dom and their fancy new Data APIs, and this essentially meant rewriting my app's routing logic using the new object-based routing...

React Router v6.4 has introduced a new routing API with createBrowserRouter and RouterProvider. In older versions of React Router, it was possible to wrap around the routes defined with React Route...

I get this error on my next js app and I don't even know why or where its coming from since the code that's throwing the error is not even written by me. error - file:///Users/cheq/Desktop/cheqo/no...

I'm having some problems getting the framer motions "staggerChildren" transition to work on a simple list of items. It basically allows animations of child components to be staggered. I got my ani...