All Questions
Tagged with framer-motion react-animations
17 questions
0
votes
0
answers
631
views
Next.js: Framer Motion bundle size not reducing despite optimization steps
I've been optimising my Next.js project using the Framer Motion animation library. According to the Framer Motion documentation, I've implemented steps to improve performance and reduce the JavaScript ...
- 1
1
vote
1
answer
900
views
Is there a way to use a React.Fragment with motion ( from Framer Motion)?
I tried to use a React.Fragment using motion to animate different element but I would like to use a React Fragment so when the animation happens I don't adding extra nodes to the DOM.
"use client&...
- 23
0
votes
0
answers
671
views
Animating SVG path points independently in Framer Motion
I'm trying to animate control points on SVG path independently. Let's say I want to draw a line from two points, point A on the left at (0, yA) and point B on the right at (100, yB).
I'd like to move ...
- 472
2
votes
0
answers
687
views
React - Product Fly to cart animation using framer-motion
i want an animation that takes the product Card and put it on the card like a fly animation and i want to use the framer-motion the problem that i have is when i set the x,y of the animation all of ...
2
votes
0
answers
611
views
Integrating react locomotive scroll while using framer-motion's scroll trigger animations is buggy
I have a few framer-motion scroll trigger animations, nothing too complicated, in my current application and I wanted to integrate locomotive scroll using https://www.npmjs.com/package/react-...
- 165
0
votes
0
answers
2k
views
How to do element transition from the element's position to another in React with Framer Motion Animation
I was trying to make a simple Button X & Y animation with framer motion, it transitions from element's point to another by interacting with it, just like Duolingo's word selection puzzles for ...
- 1
3
votes
2
answers
4k
views
how to stop framer motion animation run on every re rendering
I am using framer motion for animation and my problem is the animation triggers with every re rendering on my page. the behavior that I want is to animation only once on page entering or reloading not ...
- 163
5
votes
0
answers
1k
views
Page link jumps to top of the page before exiting with Animate Presence (framer-motion) in React
I have a page where clicking on a link should land me on a different page after the exit animations of framer motion. The issue I'm facing is that the link is visible after scrolling down the page and ...
- 166
0
votes
2
answers
3k
views
Framer Motion drag gesture on container but not child elements inside
I've created a carousel using the drag gesture in Framer, each slide contains a video component and some text. Is there a way to have a drag gesture on the entire carousel track but excluding the ...
1
vote
0
answers
507
views
AnimatePresence not working on Chrome but works fine on Firefox
I am trying to implement a simple fadeIn animation for tab contents using framer-motion.
When I click on a tab I want to display contents of selected tab with a fadeIn effect, which is working as ...
- 1,541
0
votes
2
answers
2k
views
How can i make a child animation happen every time the parent animation is beginning using framer motion & react
I'm trying to make a squeezing bubble animation on repeat, using framer motion & react, but I cant make the squeeze animation happen every time the movement animation is beginning.
instead only ...
3
votes
3
answers
6k
views
How to animate multiple framer-motion elements once in viewport
I'm using framer-motion to animate multiple elements in one page. Since framer-motion doesn't have an easy way of animating an element once it's in viewport I'm using this method:
const controls = ...
- 31
1
vote
1
answer
3k
views
Exit animation for children items not working in Framer Motion
I am making a hamburger menu animation in React using Framer Motion. When I click on the hamburger menu, the side drawer and the navigation items slide in from the left.
When I click on the close ...
- 999
0
votes
1
answer
291
views
Framer-Motion Exit Animation not firing on outer parent
Using AnimatePresence here from framer-motion and the exit animation of the outer parent does not seem to fire.
The enter animations fire for all 3 elements. For the exit animaions, only the 2 ...
- 11
2
votes
1
answer
8k
views
Issue animating react components using framer motion on state change
Im having some issues getting an animation to work using framer motion. Any help would be greatly appriciated.
Code Sandbox Example
- 25