996
questions
0
votes
0
answers
5
views
Framer Motion duration property not affecting animation runtime
I am trying to use Framer Motion to animate a square to scale up and fade in simultaneously as follows:
function App() {
const planBoxControls = useAnimation();
useEffect(() => {
...
0
votes
0
answers
10
views
Mobile responsive issue with framer motion in react
I build this project using React and bootstrap and it was complete responsive when I added framer motion it cause responsive issue as can be seen in the image. What I am doing wrong? here you can see ...
- 11
0
votes
0
answers
32
views
Odd visual behaviour with React Framer motion?
I'm experiencing an unexpected visual behavior when using React Framer motion AnimatePresence component. The actual behavior differs from what I'm expecting.
Expected Behavior:
Actual Behavior:
The ...
- 11
0
votes
0
answers
19
views
How can I implement smooth animation for real-time visx chart [closed]
I trying implement smooth mooving animation for visx real-time chart using framer motion.
Here is EXAMPLE how I wana see it.
Here is my code, currently the problem is shaking of area and line.
Which ...
-1
votes
0
answers
21
views
First click on AnimatePresence layoutId breaks animation and logic in React [closed]
When using AnimatePresence with layoutId in React, the animation behaves strangely on the first click, and other logic also breaks. On the first click, the popup appears, but the clicked element doesn'...
- 1
-1
votes
1
answer
24
views
Framer Motion preventing UI update upon re-filtering of objects
When changing a filter on an object array, the UI will never return to a higher quantity of objects after displaying a lower quantity. The array/filter functions correctly. I've deduced this to the ...
- 37
0
votes
0
answers
17
views
Why this Framer Motion Animation is not working and why is ain't getting triggered?
import React, { useCallback, useEffect, useState } from "react";
import UsersContainer from "./UsersContainer";
import { motion, useAnimation } from "framer-motion";
...
- 13
0
votes
0
answers
23
views
Issue when loading framer-motion page through Router
I will explain my problem in a scenario
I am using Framer motion with react for animation
After creating react using vite, I created a component folder under src folder
I created Motion.jsx file ...
0
votes
1
answer
35
views
Framer motion background color change from left to right [duplicate]
I saw this effect on the following website (link below), and I tried to replicate it using framer motion (React.js), but it didn't work.
The effect is, when the user hover on the card, the background ...
- 444
0
votes
0
answers
51
views
Framer Motion animation not working consistently on iOS Safari in React app
I'm building a counter component in a React application using framer-motion for the animation. The counter increments every second, and the animation works perfectly on web browsers like Chrome and ...
0
votes
1
answer
31
views
How to animate class changes with framer-motion
I have a function that changes the isOpen state when the user scrolls the mouse wheel, I need to make content that is initially behind the right side of the screen and looks out a little from there, ...
- 3
0
votes
0
answers
80
views
ReactJS object map not re-rendering after filter
I've got a ReactJS project with ThreeJS elements. I'm simply trying to make the ProjectCards refresh after selecting the ServicesCard. Right now it works, but once filtering, the list of projects will ...
- 37
0
votes
0
answers
29
views
useInView not working even though the element is in the view
I've been having a problem where I'm unable to animate because useInView() isn't working, and isHeadingInView is remaining false. The h1 element is clearly in view. This is my code:
const Page = () =&...
- 11
0
votes
0
answers
26
views
Framer motion scale and translate in place
I'm trying to replicate the following effect (the link is provided jest below) using framer motion. However, I didn't not succeed.
Hover effect
The thing is, I did scale and translate the image ...
- 444
4
votes
1
answer
119
views
using framer motion progress bar to track the y scroll on a react page that has internal overflow y scroll components
I am trying to figure out how to build a framer motion progress bar that will manage the scroll-down progress of a page comprising components. some components have viewport height settings, with y ...
- 2,607