Questions tagged [framer-motion]
Animation library for React. Use this tag with questions about programming with Framer Motion.
framer-motion
979
questions
37
votes
19
answers
53k
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 ...
- 421
34
votes
0
answers
38k
views
Can't import the named export 'Children' from non EcmaScript module (only default export is available) [closed]
im having this error when doing a named import from framer-motion module in reactjs.
Obs: im not using webpack.
import { Fragment } from "react";
import classes from "./Hero.module.css&...
29
votes
3
answers
26k
views
Animate children when hover at parent with Framer-motion
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}}>
...
- 4,086
20
votes
2
answers
39k
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,613
20
votes
1
answer
37k
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 }}
...
- 203
19
votes
2
answers
24k
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 ...
- 470
15
votes
1
answer
15k
views
Framer Motion exit animation not firing on accordion with react-router-dom
So I've got this accordion-layout working with react-router-dom using a rather unconventional markup structure.
Demo:
https://codesandbox.io/s/falling-violet-kvqn2?file=/src/Case.js
Shortened code for ...
- 732
14
votes
3
answers
32k
views
staggerChildren with framer motion
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 ...
- 625
13
votes
5
answers
18k
views
How to use framer-motion with material-ui? (reactjs)(@material-ui/core)(framer motion)
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.
- 607
12
votes
6
answers
14k
views
Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes & AnimatePresenceProps'.ts(2559)
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}) => <...
- 22.6k
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 ...
- 548
11
votes
2
answers
31k
views
React: Framer Motion / onClick activate only the animation
I am trying to animate an image with Framer Motion:
utils/MonkeyPicture.js
import React from 'react';
const MonkeyPic = () => {
return (
<div>
<img
transition={{ ...
- 335
10
votes
4
answers
14k
views
Apply motion to react component Framer-Motion
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 ...
- 775
10
votes
4
answers
15k
views
In framer-motion, how to animate pure data like a number from 0 to 100?
How can I animate a pure number from 0 to 100 with a transition config?
<motion.div>
{num}
</motion.div>
- 781
10
votes
1
answer
24k
views
How to Navigate and Scroll to an Element with ID in a Next.js Page wrapped with AnimatePresence
I am using Framer Motion to animate Next.js page transitions. However using the using AnimatePresence breaks the hash link navigation and the page no longer goes to the targeted id element.
The page ...
- 1,714
10
votes
2
answers
5k
views
Apply a class in a Framer Motion tag, animate or initial prop
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&...
- 123
9
votes
2
answers
5k
views
How to make a page transition with Framer Motion and Next.js 14?
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 ...
- 1,363
8
votes
2
answers
17k
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
1
answer
10k
views
Question about running multiple animations in sequence with Framer Motion
I've only been using Framer Motion since today, and I wanted to know if it was possible to run several animations on an image and repeat one in particular.
Basically, I would like to make an image ...
- 134
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
8
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 ...
- 305
7
votes
2
answers
19k
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,609
7
votes
6
answers
23k
views
React.Js + Framer Motion animate only on initial page load
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 by ...
- 113
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
7
votes
1
answer
5k
views
Different transition for exit animation in Framer Motion
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)'}}
...
- 11.4k
7
votes
1
answer
2k
views
Framer-motion drag not respecting previously updated props
A simple use-case is to allow a user to either click buttons to paginate in a slider, or drag. Both events call the same paginate function with a param to either go forward or back--simple stuff.
...
- 18.8k
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
6
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,609
6
votes
1
answer
5k
views
Exit Animations with AnimatePresence (Framer Motion) and createBrowserRouter & RouterProvider (React Router DOM v6.4.1)
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 Router ...
- 243
6
votes
5
answers
9k
views
Avoiding framer-motion initial animations on mount
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 ...
- 3,570
6
votes
1
answer
4k
views
Framer Motion text gets distorted when animating with shared layouts
I am in a Next.js enviornment and have wrapped my _app.js with .
Inside a page I have a basic routing set up to jump from page 1 to page 2.
On each page I have a motion h1 which looks like. So there ...
- 431
6
votes
3
answers
6k
views
tailwind css into variants - framer motion
How to use tailwind css classes into framer motion objects..
const variant = {
hidden: {
'w-0'
},
visible: {
width: 400,
transition: {
type: 'spring',
...
- 61
6
votes
3
answers
8k
views
How do I use percentages with MotionValues in Framer Motion?
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 ...
- 1,732
6
votes
1
answer
3k
views
Framer motion Reorder not allowing dragged item to scroll the container
If you look at the example on framer motion docs for scrollable lists, when you drag the item outside the view of the container, the container does not scroll. I'm looking for a behavior similar to ...
- 85
6
votes
1
answer
652
views
Framer motion and transform matrix
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 ...
- 145
6
votes
1
answer
4k
views
Nested child route transitions in react-router-dom 6.4.3 using framer-motion
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 ...
- 268
6
votes
0
answers
336
views
is there a way to pin an element with framer-motion in a gsap manner?
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/pen/...
- 149
6
votes
1
answer
715
views
Opacity transition affecting child with backdrop-filter
I am trying to run a transition when entering the viewport. I want the cards to simply opacity in... I have a proxy element inside my div with backdrop-filters applied to apply a "frosted glass&...
- 349
5
votes
1
answer
19k
views
Framer Motion: change color animation direction
In Framer Motion, I'm trying to get two colors to animate smoothly. The colors are red 'hsl(0, 100, 50)' and blue 'hsl(240, 100, 50)'. Unfortunately, the animation is going through the color wheel, ...
- 408
5
votes
1
answer
9k
views
Framer Motion - use different durations on transition properties
I am using Framer Motion in React to animate a circular progress bar. I have managed to get the actual circle to animate based on a a dynamic duration (that gets passed from a parent component). The ...
- 51
5
votes
1
answer
3k
views
framer motion crashes next js app with the following error: "SyntaxError: Named export 'useId' not found"
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/...
- 833
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,038
5
votes
1
answer
7k
views
Snapping to position onDragEnd with motionValues using Framer Motion and React
I'm using framer motion to create a swipe interaction in my project. I'm trying to make it so that when the user is done dragging the child, it will 'snap' back into a set position.
I've seen from ...
- 243
5
votes
1
answer
2k
views
I want to create a custom radioButton with framer-motion
We are using react and typescript.
The design library is chakra-ui.
We are using framer-motion for animation.
What I want to do
I want to create original radio buttons.
RadioButton behavior
When the ...
- 139
5
votes
1
answer
993
views
Access parent ref from child for framer motion useElementScroll
I have the following 2 components:
App.tsx
import { useRef, VFC } from "react";
import Card from "./Card";
const App: VFC = () => {
const scrollRef = useRef<...
- 14.3k
5
votes
0
answers
3k
views
Framer Motion not updating zIndex with keyframes
I am trying to animate a stack of cards where the active one slides out and comes on top of the other cards. To get the full effect, I need the z-index to change in the middle of the animation. It ...
- 135
5
votes
1
answer
592
views
React Router + Animation libraries problems: components won't animate before unmounting with react-router-dom
I have the following code:
import React from "react";
import { BrowserRouter, Route, NavLink } from "react-router-dom";
import { AnimatePresence, motion } from "framer-motion";
import Hi from "./Hi";
...
- 673
4
votes
2
answers
8k
views
exitBeforeEnter is not working as intended - Trouble w/ Page Transitions
I'm trying to create a smooth page transition using a combination of react-router-dom and framer-motion, and I'm trying to have my pages fade out on exit and fade in on enter. But exitBeforeEnter is ...
4
votes
2
answers
4k
views
How do you use Framer Motion + Styled Components together?
I’m wanting to use Styled Components and Framer Motion Together to style and animate....
Can I use a variable from SC or FM to style and animate it?
What is a example?
- 51
4
votes
2
answers
26k
views
Animate SVG along path with Framer Motion
Is there a way to animate a SVG element along a path (preferably a SVG path itself) with Framer Motion?
Furthermore, is it possible that the animated SVG element changes its rotation in turns?
The ...
- 43