Open source, production-ready animation and gesture library for React https://framer.com/motion
Questions tagged [framer-motion]
244 questions
0
votes
0 answers
Dynamic responsive clamped text in animated div
I have a card with clamped text that is expanding to fullscreen. I want it to stay max 2 lines, but to dynamically fill parent div when it changes it's size due to animation. But for some reason it refuses to expand, only if I style the …
John
- 71
- 7
0
votes
0 answers
Restarting the animation when state changes
See my codepen for an example of what I'm trying to accomplish.
Very simply, whenever the div is clicked, the state variable color changes. I want the div to fade in again from 0 opacity to 1 opacity in 4 seconds when color changes. I don't know…
L Becker
- 503
- 5
- 16
0
votes
0 answers
Can't animate an item unmount with any library
I have an list of items and I want item deletion to be animated. I've tried a lot of libraries, including Framer-motion and Transition Group, and none of them works if I use the data from Redux. But if I take the data from the component state — it…
Ричард Фейнман
- 99
- 2
- 8
0
votes
1 answer
Framer motion - State not persisting through routes
I'm trying to use Framer Motion to animate routes using AnimatePresence and for some reason the context i'm trying to populate info with (collecting personal info via forms as sign up steps) through each route doesn't persist when one rout exits and…
Kautilya Kondragunta
- 111
- 1
- 12
0
votes
1 answer
Framer Motion pathLength property not working
I ran into a weird issue with Framer Motion today.
For some reason, this snippet (copied and pasted from their website) doesn't work, only the opacity is animated
import React from "react";
import { motion } from "framer-motion";
const icon = {
…
Gabriel
- 75
- 6
0
votes
0 answers
How to implement a animation for a React component that is unMounted?
So i have this list of components let's say that are rendered.
They are kept in an array that's in state.
I have a function that deletes them from that array from state, when needed.
I want to make a nice 'fade-out' animation before a component will…
manta
- 61
- 9
0
votes
1 answer
[0,1,2,3].map works fine, array.map gives strange results
I am using framer motion and I am trying to achieve stagger so that every next child has some nice delay. There is one crucial line of code in which when I replace [0, 1, 2, 3].map with recipes.map suddenly all of the children are treated as one…
ablaszkiewicz1
- 73
- 6
0
votes
0 answers
Why does array.map and [0,1,2].map in React work in different way?
I am using Framer motion and would like my cards fetched from API to fade in nicely one by one. I am following this code demo from Framer motion.
This works completly fine:
ablaszkiewicz1
- 73
- 6
0
votes
0 answers
How to prevent accordion animation from scrolling content off screen?
I'm trying to animate an accordion widget where only one panel can be open at a time. However, the content of the accordion panels varies pretty significantly in length. I'm having an issue where opening a smaller panel that is further down in the…
Travis DePrato
- 336
- 2
- 8
0
votes
0 answers
How to measure the scroll limit of a horizontal scroll component?
Tech: React.js + Framer Motion
My site demonstrating the issue: https://animations-v2--beewai-portfolio.netlify.app/
A simplified codebox demonstrating the issue: https://codesandbox.io/s/portfolio-scroll-bug-5crke?file=/src/App.js
Please view the…
user11834465
0
votes
1 answer
Framer Motion Library "hooks" not working with reagent
The path tag of framer motion can be used in conjunction with useViewportScroll to create a scroll info path.
const { scrollYProgress } = useViewportScroll()
return (
lamp bottle
- 481
- 3
- 12
0
votes
0 answers
Framer-Motion,,,in React JS. is there "TOO MUCH USE" of framer motion? vs using Reacts defaults or a style library?
is there "too much use" of Framer Motion?
(DATA SIZE)
i like how framer motion is with variables and interactions.
you can add and get allot done with just a couple variables vs having to create states and other things with React.
im also using it…
Justcode123
- 21
- 3
0
votes
2 answers
Framer motion not animating svg correctly with AnimateSharedLayout
I've been playing with the new framer motion library to try to move an svg circle to a new position. It will be from position relative to position fixed so I can't just transform the circle and so was hoping to instead use AnimateSharedLayout.
It is…
Theo
- 1,203
- 16
- 22
0
votes
0 answers
Why is my Router not working after adding Transitions with Framer-Motion?
I used a around my Component like this:
…
Willey3x37
- 104
- 9
0
votes
1 answer
Framer motion with react route not working properly with slide effect
I am learning react in the past few days. I have beening play around with the slide animation of react routes, and using Framer Motion. However, I have tired many times and could not be able to get it working properly.
For some reason, the slide in…
Kongeek
- 25
- 6