Open source, production-ready animation and gesture library for React https://framer.com/motion
Questions tagged [framer-motion]
244 questions
13
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
- 630
- 7
- 22
7
votes
2 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
- 2,803
- 3
- 25
- 51
6
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
- 909
- 16
- 23
6
votes
1 answer
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
- 280
- 1
- 6
- 15
5
votes
1 answer
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 user hovers the button → the radio button turns…
ryuma
- 89
- 5
5
votes
1 answer
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";
import Something from "./Something";
import…
Herman
- 263
- 3
- 8
5
votes
1 answer
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
- 2,099
- 1
- 13
- 31
4
votes
2 answers
Troubles animating react-router with framer-motion
I'm trying to add some animations and smoothness to an app with Framer-motion and I'm struggling to make it all work.
Using react-router 6, I want to trigger some exit animations on route sub-components when the url changes. Following this tutorial,…
ostrebler
- 933
- 3
- 19
4
votes
1 answer
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 to demonstrate the…
itaydafna
- 1,193
- 8
- 17
4
votes
1 answer
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
- 135
- 2
- 9
4
votes
2 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
- 475
- 1
- 7
- 20
4
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…
hamed hatami
- 419
- 4
- 14
3
votes
1 answer
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'
import '../styles/globals.css'
function…
myB
- 59
- 4
3
votes
1 answer
Framer Motion exit animation not firing with Reach Router
I've created a basic Gatsby App, which is utilising Client-Only Routes with Reach Router.
I've updated my gatsby-browser.js to reflect the following:
export const wrapPageElement = ({ element }) => {
HireLee
- 489
- 1
- 9
- 22
3
votes
3 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
- 164
- 10