Animation library for React. Use this tag with questions about programming with Framer Motion.
Open source, production-ready animation and gesture library for React.
Questions tagged [framer-motion]
812 questions
36
votes
18 answers
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 named export 'Children' from non EcmaScript…
Vicky
- 401
- 1
- 5
- 11
34
votes
0 answers
Can't import the named export 'Children' from non EcmaScript module (only default export is available)
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";
import { motion } from "framer-motion";
import Header from…
Cláudio Vitor Dantas
- 805
- 4
- 10
- 17
23
votes
3 answers
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.
Visit our Industry
{/*Animate this Icon to…
ArchNoob
- 3,946
- 5
- 32
- 59
16
votes
2 answers
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 mousedown, mousemove and mouseup events to do this.…
mineshmshah
- 430
- 2
- 7
- 16
16
votes
2 answers
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 component mounts, it'll automatically animate to the…
Ali Elkhateeb
- 3,413
- 4
- 21
- 39
15
votes
1 answer
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 one accordion header:
umbriel
- 723
- 1
- 7
- 22
13
votes
1 answer
Animate Presence exit not working framer motion
Animate presence exit prop is not working
what i am doing wrong?
…
Mr SaaD
- 133
- 1
- 1
- 6
13
votes
5 answers
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.
Satyam
- 567
- 1
- 6
- 20
11
votes
3 answers
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}) =>
meds
- 21,699
- 37
- 163
- 314
11
votes
3 answers
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 animation properties set up like this, for the parent…
qua1ity
- 565
- 2
- 8
- 27
11
votes
2 answers
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 am using framer motion for transition between…
hmd.fullstack
- 478
- 1
- 7
- 20
9
votes
1 answer
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.
I HAVE to use classes as I am using…
yo
Oded Ahmed
- 113
- 1
- 5
9
votes
2 answers
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 (
![]()
FilipZafran
- 315
- 1
- 5
- 14
9
votes
1 answer
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 transitions are perfect until you want to navigate…
iamcastelli
- 1,564
- 2
- 20
- 30
8
votes
3 answers
Apply motion to react component Framer-Motion
I know that I can apply motion directly to element/HTMLtag like this:
some content
But how can I apply it to this?
Andrew
- 695
- 1
- 8
- 21