38
questions
38
votes
19
answers
55k
views
Error importing Framer Motion v5 in React (with create-react-app)
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 the ...
- 431
21
votes
1
answer
38k
views
Animate Presence exit not working framer motion
Animate presence exit prop is not working
what i am doing wrong?
<AnimatePresence>
<motion.div
initial={{ opacity: 0, x: "-100%" }}
animate={{ opacity: 1, x: 0 }}
...
- 213
20
votes
2
answers
40k
views
Framer motion animate when element is in-view (When you scroll to element)
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 ...
- 3,633
3
votes
3
answers
4k
views
Exit animation on NextJS 14 Framer Motion
I'm attempting to add page transition animations to a Next js 14 app using Framer Motion.
I have PageTransitionLayout.tsx which looks like this
'use client';
import { motion, AnimatePresence } from &...
- 43
1
vote
1
answer
1k
views
[0,1,2,3].map works fine, array.map gives strange results
I am using framer motion and I am trying to achieve stagger so that every next child has some nice delay. There is one crucial line of code in which when I replace [0, 1, 2, 3].map with recipes.map ...
- 955
20
votes
2
answers
25k
views
How to test mousemove drag and drop with react-testing-library and framer-motion
I am trying to test the drag and drop functionality using react-testing-libary. The drag and drop functionality comes from framer-motion and the code is in reacy. From what I understand it uses the ...
- 480
12
votes
2
answers
21k
views
How to implement loading screen in Next.js
I am new in nextjs and using nextjs v9.3, next-redux-wrapper v5, @material-ui/core v4.2, and custom express server.
I am trying to implement a loading screen when changing routes in my Nextjs app so I ...
- 558
9
votes
2
answers
6k
views
How to use Framer Motion <AnimatePresence> and React Portals?
Situation
I built a React Modal component using React Portals (see Docs above). Before unmounting the component when the close button is clicked, I want to run an exit animation with Framer Motion ...
- 315
8
votes
2
answers
19k
views
Transition between routes in react-router-dom v6.3
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 ...
user18472307
8
votes
2
answers
8k
views
Animate presence not working in next js for exit animations only? [duplicate]
I'm trying to set an exit animation to my components in next js but I'm only able to give an initial animation.
Can someone tell me what is going wrong here??
Here is my sample code:
<...
- 491
7
votes
2
answers
20k
views
How to animate on each state change using framer motion
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 animation ...
- 5,659
7
votes
3
answers
16k
views
Framer-motion, delay rotateY while animating x
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 ...
- 5,659
7
votes
2
answers
6k
views
Next.js "_framerMotion.motion.custom is not a function"
I have a problem with Chakra UI in Next.js. I have installed all packages normally. And I have edited the _app.tsx.
import { AppProps } from 'next/app'
import { ChakraProvider } from '@chakra-ui/react'...
- 99
6
votes
1
answer
9k
views
React-router-dom (v6) with Framer Motion (v4)
I am trying to update my react-router-dom to v6, but it seems to be causing issues with framer motions AnimatePresence, specifically the exit transition.
In App.js:
import { Routes, Route } from "...
- 217
5
votes
1
answer
2k
views
Framer Motion - stale custom value - changing the custom value doesn't trigger an update
Using framer-motion, I have an issue where updating the object I pass on the custom prop to the motion.div variants doesn't trigger the expected style change.
I created the following sandbox in order ...
- 2,048