Open source, production-ready animation and gesture library for React https://framer.com/motion
Questions tagged [framer-motion]
244 questions
3
votes
1 answer
Images not loading fully until hovered over
On my React website, I have a vertical list of screenshots of my past projects, when the page first loads the images load, but are only a sliver until the user hovers over them.
Once hovered over the images expand to their full size and then work…
imstupidpleasehelp
- 710
- 1
- 3
- 18
3
votes
1 answer
How to use Framer Motion 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 using AnimatePresence. Unfortunately, I can't make…
visionInc
- 137
- 2
- 10
3
votes
2 answers
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 the component?
Right now, if I scroll down the…
Kryptikk21
- 63
- 1
- 6
3
votes
2 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
- 421
- 2
- 16
3
votes
1 answer
Next.JS with framer-motion does not change content on navigation
I have the following Link on my index page that links to my About Us page:
About us
in my _app.js file, I have this AnimatePresence wrapper:
strangeQuirks
- 2,671
- 4
- 20
- 34
3
votes
1 answer
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 the docs that you can use a spring to animate a…
Jesse Sliter
- 201
- 1
- 3
- 12
2
votes
1 answer
I want to change the color of the stroke when the animation is over
I'm using react and typescript.
The animation is implemented using motion.
I want to change the color of the stroke from red to white when the animation is over.
How can I detect when the animation is finished?
import * as React from "react";
import…
yyy rrr
- 43
- 3
2
votes
0 answers
How i can extend my jsx element using construction like
Frankly speaking, it is even difficult to formulate the question, since did not work with it before. Several times I've seen React libraries that extend the jsx properties of an element using it as an object field (at least it looks like this). I…
vinkovsky
- 278
- 3
- 11
2
votes
1 answer
How to use animation multiple times in framer motion
Just like in the title, I'm trying to animate my component multiple times when clicking a button. Currently, animation only runs once and then it doesn't work anymore, how could I possibly implement that
here is an example of what I'm trying to…
Dettlaff
- 142
- 2
- 4
2
votes
1 answer
How to fix the exit animation in Frame-motion?
I have a code as below :
export default ({ er, setError }) => {
React.useEffect(() => {
setTimeout(() => {
setError('')
}, 2000);
}, [setError]);
return (
Hypothesis
- 648
- 2
- 6
- 23
2
votes
0 answers
Framer Motion's AnimateSharedLayout doesn't crossfade, and how to inversely scale inner elements
I'm using React Router in my project and have a list of album cards on the "Overview" page, and the same list of album cards on the "Albums" page. The only difference is the albums page is slightly wider.
I'd like the cards to transition to their…
dvyio
- 329
- 4
- 18
2
votes
1 answer
Can't achieve smooth transition between react router pages with Framer Motion
It is been over a week now, and I can't get it to work!, I am trying to make a transition between react pages components to have it scroll up and down for each page.however, on exit page the second page takes longer to be displayed and I can't…
John Yacoub
- 49
- 5
2
votes
1 answer
react-spring and framer-motion laggy on firefox
I have problem with two animation libraries(react-spring, framer-motion). I was trying to make simple animation in moment when component is first time visible. (it's simplify version)
itsnotmikhael
- 27
- 4
2
votes
2 answers
Framer Motion and React router 5: How do I prevent re-render of parent components with nested routes?
In the example sandbox below I have a parent React Router rendering two animated components.
https://codesandbox.io/s/frame-motion-x-react-router-x-simple-tb1wg?file=/src/Routes.tsx
One of them contains its own nested links - each with their own…
Laurence Fass
- 782
- 2
- 6
- 19
2
votes
1 answer
How can I make a drag handle drag correctly in Framer Motion?
I wanted to replicate this tutorial (https://www.youtube.com/watch?v=UMGnYRJuJog) that shows how to create a drag handle in Framer X. Using framer-motion, I thought it worked but I am getting extra space on dragging that shouldn't occur. It may be…
satvikpendem
- 91
- 1
- 4