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
-1
votes
1 answer
animationpresense in Next.js 13
could someone please tell me how to convert this code into Next.js 13? I am attempting to create a page animation using Framermotion, but I am struggling to figure out the process in Next 13.
// _app.js
import { AnimatePresence } from…
Tabim
- 1
- 3
-1
votes
1 answer
Why is this framer motion svg animation not working?
I am trying to animate this SVG file:
"use client";
import { motion } from "framer-motion";
export default function Home() {
return (
<>
…
Henrique B
- 3
- 3
-1
votes
1 answer
Exit Property not working in Framer Motion with react js
Exit Property not working in Framer Motion with react js Everything is going well but exit motion is not working i am trying this for more than a week please help me!
Exit Property not working in Framer Motion with react js Everything is going well…
K Kumar
- 71
- 1
- 10
-1
votes
1 answer
react. js components are not rendering inside routes paths
I am trying to make some animated path routes with framer-motion but components are not appearing and apparently there is an error saying that routes Home,Contact and about cannot be resolved in routesWithAnimation.js.
import { useLocation } from…
Andrea Lopez Bravo
- 155
- 2
- 2
- 11
-1
votes
1 answer
How do i calculate the dragConstraints of framer motion slider?
I'm using framer to render data gotten from an API in slides on the front end but i'm having an issue with the dragConstraints, It won't slide through to the end.
const [width, setWidth] = React.useState(0)
const carousel =…
Tomiwa
- 59
- 7
-1
votes
1 answer
how can I use scrolling in the horizontal direction?
Friends, how can I use scrolling in the horizontal direction?
https://codesandbox.io/s/klcs8?file=/src/Example.jsx
Ember
- 1
- 4
-1
votes
1 answer
How to get rid of the streaks after layout animation in framer.motion
When framer.motion animates between two layout-states (using AnimateSharedLayout) the animation leave streaks outside of the animated element. It's hard to explain but i created a very minimal example in codesandbox. It happens when the box gets…
olaf
- 65
- 6
-1
votes
1 answer
Absolute positioning vs relative parent: any workaround?
I have tiled four cards 2 x 2 with react-bootstrap Row and Col. On click each expands and moves slightly up via framer-motion. But I'd like each to position in the center or top left on a click. I think the relative positioning in the bootstrap is…
setInterval
- 59
- 1
- 5
-2
votes
0 answers
Replicating Card UI Animation and Design from https://fluent2.microsoft.design/
The specific challenge I'm facing is a React.js and TailwindCSS-based card. This card features buttons for actions like 'like', 'share', and 'bookmark' "open website link", "show details". The problem lies in the duplication of the 'open website…
Abbos
- 1
- 1
-2
votes
1 answer
Changing the Color of Text on Hover in React
Please help a non-developer. I need to change the color of the text upon hover. Here is the code. This is for a link that downloads my resume on click, and I copied it directly from a Framer support article about creating downloadable links. I was…
DJ101010
- 1
- 1
-2
votes
1 answer
Horizontal cropping animation for image on scroll
I tried to replicate this effect but it snaps when you scroll up fast.
codesandox. How to make it pleasing on the eyes?
Suhas Rao
- 67
- 7
-3
votes
1 answer
How to make framer motion work with styled component keyframes?
https://codesandbox.io/s/keyframe-plus-whilehover-zodx7?file=/src/App.js
If keyframe animation is applied to a component, any event like whileHover or onTap won't work on that motion.div.
The reason why using styled component for animating a div is…
shuo
- 51
- 6
-4
votes
1 answer
How to fix hamburger menu animation?
I have added hamburger menu to my web application (MERN stack) for screen sizes below 500 px.
When I click on the hamburger menu, both the lines should animate to a cross, which is happening. However, the two menu lines remain on the screen as…
HKS
- 526
- 8
- 32