Open source, production-ready animation and gesture library for React https://framer.com/motion
Questions tagged [framer-motion]
244 questions
1
vote
1 answer
Framer Motion text gets distorted when animating with shared layouts
I am in a Next.js enviornment and have wrapped my _app.js with .
Inside a page I have a basic routing set up to jump from page 1 to page 2.
On each page I have a motion h1 which looks like. So there are two components with matching ID's.
const…
mango
- 117
- 1
- 8
1
vote
1 answer
react I want to hide the div tag when the animation is over
I'm using framer-motion for animation.
When the animation pageVariants finishes, I want to hide the div tag used for the animation.
Currently, when the animation is finished, the div tags are moved to the bottom of the screen so that the user can…
user15375616
- 31
- 5
1
vote
1 answer
Animating layout of list items when new items added to top of a list in Framer Motion (React)
I have a list of items and I'm adding additional items to the top of this list with a button.
I want the items already in the lift to smoothly animate down to accomodate the new items.
I'm using AnimateSharedLayout and I have it working fine if it's…
Ben Jackson
- 191
- 1
- 8
1
vote
0 answers
Get even.target which is under the dragged object
I am using framer-motion to drag items. To identify drag end I am using onDragEnd callback with event.target.closest(). The expected result is to return an item underneath the dragged object. Unfortunately, it returns the dragged object itself.
I…
ablaszkiewicz1
- 73
- 6
1
vote
1 answer
How to animate background-image in framer-motion?
I'm trying to learn framer-motion together with reactjs + styled components. I wonder how to add smooth animation/transition on the background-image of a div.
Here's the variants that I have tried:
const parentVariants = {
car: {
…
Lyzer Bautista
- 11
- 1
1
vote
1 answer
history.push('/something') does push, but does not render the component because of exitBeforeEnter property of Animate Presence of framer-motion
I am trying to navigate to /main from postActions after deleting a post from PostDetail.
Code showing action
It pushes the /main but doesn't render the main component.
code showing where the problem occurs
However this does work if I am opting out…
NizTheDev
- 11
- 1
1
vote
0 answers
Framer Motion - animation already done on page load - SSR problem?
I'm trying to create a really simple loader animation with Framer Motion, and I got stuck with some weird things happening.
When I reload the page animation seems to be already completed, and it doesn't repeat as I specified in transition prop. My…
Marcin
- 23
- 1
- 3
1
vote
1 answer
Exit animations in react framer-motion not appearing
I am creating a space viewer app and using Framer motion for the animations. What I am aiming for is the starting component that is called loading will have an exit animation upon being clicked. However at the moment all of my components are failing…
imstupidpleasehelp
- 710
- 1
- 3
- 18
1
vote
0 answers
React framer-motion objects increasing in size when dragging
So as the question says my objects are increasing in size when I drag then and I'm really not sure why, here is the code can anyone see what I'm doing wrong? Its a bunch of circle images which just move around a bit on the screen and grow slightly…
CodeKid
- 13
- 4
1
vote
0 answers
hashRouter React breaking AnimatePresence(Framer-Motion) exit animations
I'm creating a react app that has multiple tabs reached via routes with exit and entrance animations created with Framer motion. On live launch of the build I found out about the standard Refresh problem when refreshing out of the index page giving…
Treneff
- 11
- 2
1
vote
1 answer
Is it possible to use Framer Motion in React with pug
I am using multiple technologies for my advanced React web page development
I previously used AOS for animating my react components simply, also tried GreenSock once but it didn't fit my needs...
I am using Next js and pug js in Next js through…
Hrithik Tiwari
- 81
- 5
1
vote
0 answers
Animations and first load are lags because of css @fontface
I have a custom font that I use with @fontface. the font is local. on the first load of the page there's a small lag and every time a new page or a component loads there is the same lag.
if I don't use the custom font there are no lags. Examples…
Daniel
- 53
- 7
1
vote
2 answers
Get only CSS value of particular Tailwind CSS class
Is there a way to get only the CSS value of a Tailwind CSS class? For example, if I have translate-x-4 tailwind class I want only the 1rem CSS value (since class translate-x-4 is --tw-translate-x: 1rem;). This would be pretty useful with Framer…
rokob
- 129
- 1
- 7
1
vote
1 answer
How to make animated path on a circle with framer motion?
I have this issue: I am making a circle and it animates like if it would have 2 strokes. Also, the animation has 2 starting points. any idea what's wrong?
https://codesandbox.io/s/silly-bohr-fo5bs?file=/src/App.js
import { motion } from…
amel ramirez
- 13
- 2
1
vote
0 answers
Framer Motion : How to fix {No initial value for "pathLength" can be inferred. Ensure an initial value for "pathLength" is defined on the component}
The error specified in the title is obtained when using framer motion's pathLength property to animate svg.
Other properties (I tried rotate and opacity) work as expected without any issues.
What might be the possible issues?