996
questions
0
votes
0
answers
6
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
11
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
53
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
0
votes
2
answers
50
views
framer-motion gesture animation
i would like to create a framer motion animation in React that removes and element on click and visualizes another element.
Here is an example
example
This is my code:
{!tileOpen ? (
...
- 1
-2
votes
0
answers
8
views
Problem with animation fluency in Framer Motion
I've tryng to solve it by myself but I dont find any solution, its about how fluent a menu button disappear, everytime the user scrolls down it will "disappear" , but if the user for example ...
0
votes
0
answers
9
views
Transitions and exit animations not executing
I'm working on a Gatsby project and decided to use Motion for CSS animations. As of right now my code looks like this
<AnimatePresence>
{ filterToggle && (
<motion....
- 3,122
0
votes
1
answer
60
views
how to prevent the useInView() and useScroll() framer-motion hooks from start together at the same time?
Description of the wanted animation behaviour:
when a part of the section is inside the viewport, the element I want to animate should ENTER the viewport using a vertical movement from its initial ...
- 123
1
vote
0
answers
20
views
How to show opacity 1, when html tag come in viewport area by using useAnimate of framer motion?
I want to show some animation when an htm element comes into the view port area. For that I am using the useAnimate hook of framer motion. But it fires the same time before coming to viewport areas.
...
0
votes
0
answers
11
views
React Framer Scroll Space
I want something like Horizontal Scroll Carousel at https://www.hover.dev/components/carousels but when you scroll to the last image I want to remove the extra space and end the container with the ...
- 15
0
votes
0
answers
74
views
Animating Seamless Page Transitions in React with Next.js (and updating URLs)
For a project within our organization, we are developing an app using React (preferably Next.js). The UX team has designed an animation for the transition between two pages with different URLs. In the ...
- 1
1
vote
1
answer
57
views
Why is framer-motion nested motion not working?
I have a problem with nested motion, outer motion.div is working, but this nested with layout id is not. I noticed that the internal motion.div works when I remove the external motion from this div. ...
- 11
0
votes
0
answers
17
views
Framer motion - animate path with progress tied to scroll, not to path length
I have a vertical stepper with steps on left, right, left, right, etc... In center there's a motion.path which is a vertical line with slight curves leaning toward each step. This path should be ...
- 211
0
votes
0
answers
19
views
React SplitPane width issue when scaling with Framer Motion and resising window
I'm experiencing an unexpected behaviour with the SplitPane component from the "split-pane-react" package (version 0.1.3) in my React project. The issue occurs when the SplitPane is scaled ...
- 1
-1
votes
0
answers
16
views
Framer motion animation does not work with private route react-router-dom v6
All animations work fine except in the Home component. When pressing the Sign Out button, the exit animation does not work.
There is a ready-made minimal implementation in the sandbox: https://...
- 1
0
votes
0
answers
8
views
Stacking context with nested mapping in Typescript React using Framer Motion
I have an array of skill objects, some of which have an array of subskills. I'm using nested mapping to render them as cards, flexbox to lay them out, and Framer Motion to staggered-ly animate them on ...
0
votes
1
answer
20
views
Stagger Children with framer-motion where the child is a custom component
I am trying to create a mobile menu where the nav items fade in one at a time. I've dug around but can't seem to find what I'm doing wrong here. Instead of staggering each NavLink item, they all load ...
0
votes
0
answers
19
views
How to apply different animation on different element in one useEffect hook?
**I want to aplly separate animation for specific element.When targeting one elemnt by selector only that element is being applied framer property. But dont know how to apply.Kindly resolve my problem,...
0
votes
1
answer
20
views
How to hide overflow between transition of one component to another component in react js
Home.jsx file :
<motion.div id="container" initial={{ opacity:0 }} animate={{ opacity : 1 ,transition:{ delay:0.3 }}} exit={{x:"-100vw",transition:{ ease:"easeInOut", ...
- 1
0
votes
2
answers
25
views
Animation resets when InView component callback is called
Whenever I try and update state in my InView component, it brings back my AnimationText to the initial state it was in until I refresh. This is only when I update my darkNavbar state to inView. I'm ...
- 41
0
votes
0
answers
26
views
My image disappears when inside a motion.div - Remix.js
I am using Remix.js for a project and working on a component where an image should animate into view using Framer Motion. However, the image does not display when wrapped in motion.div. Below is the ...
- 1
2
votes
1
answer
55
views
Next.js 14: Framer Motion useScroll with element container not updating
I'm using Next.js v14.2.5 and Framer Motion v11.3.21. I'm working on a card carousel that scrolls horizontally. To track the scrolling progress, I'm using the useScroll hook from Framer Motion. ...
- 486
-1
votes
0
answers
34
views
NextJS not rendering Hero component on full screen
I am creating a static site with NextJS (seems too much just for a static site I know but I might have to expand this in the future). Anyways, right now I am keeping it simple with a few animations. ...
- 91
0
votes
0
answers
27
views
How to Animate the Top Half of a Flip Card Falling with Framer Motion in React?
I'm trying to create a countdown timer in React using Framer Motion, where the digits change with a flip effect. I want the top half of the card to "fall" or "flip" down when the ...
- 612
1
vote
1
answer
38
views
Expericing visual glitches in an infinite looping animation with React and Framer Motion
I'm trying to create an infinite looping animation for a list of items using React and Framer Motion. The intended sequence is:
Left column items move down, with the last item fading out.
The top ...
- 3,656
0
votes
0
answers
18
views
Animations in Framer Motion
I was trying to implement Framer Motion, to understand how it works, in a personal project of mine.
For now, I wrote the following code (100% working), in these two components:
Modal.jsx
import { ...
- 71
0
votes
0
answers
15
views
AnimatePresence Framer Motion with NextJS and Storyblok
export default function MyApp({ Component, pageProps, router }){
const [ isLoading, setIsLoading ] = useState(true)
useEffect(() => {
if(isLoading === true) {
document.querySelector(&...
2
votes
2
answers
191
views
Overflow hidden on a sticky div breaks ability to scroll to the bottom on mobile browsers
I wanted to use a scroll effect (parallax + filters) in a very simple page. It's just a sticky 120vh div with a background image and some text.
Everything works fine in the desktop browser and with ...
- 8,613
0
votes
0
answers
26
views
The scroller delays (or lags) when using react-three/fiber and framer-motion
I'm trying to combine three.js content by react-three/fiber and framer-motion.
The problem is that when I use framer-motion to pin the canvas to the top, I notice a delay gap between my HTML content ...
- 13
0
votes
0
answers
31
views
Framer motion animation flickers when animating
When the animation completes it flow, it flickers once. So when it fades from the left it flickers and when it leaves it flickers
import { motion, useInView } from "framer-motion";
import { ...
- 39
0
votes
0
answers
12
views
Implementing Cube In and Cube Out Effect with Framer Motion in React
I'm working on a React project where I want to implement a cube in and cube out effect on a component transition. Currently, I have a Person component displayed from a list of people.
Each Person ...
- 1,904
0
votes
0
answers
18
views
Framer Motion beaks the website in localhost after uptating content
I'm building the website using Next.js, Tailwind and adding simple animations to sections and text with Framer Motion. However, I'm experiencing an issue that slows down my development. When I run my ...
- 1
0
votes
0
answers
36
views
Scroll looks harsh in static site Hero section with framer-motion scroll animations
In a personal site I have a Hero section with a couple images set to produce a parallax effect and a 3D model. The desired behavior is for the 3d model to animate before the parallax effect is ...
- 1
0
votes
0
answers
23
views
How to implement text opacity to change on scroll but section to remain sticky till the animation is completed to the very last character?
I am trying to build a website through framer ( a no code tool ). I wanted a text opacity to change on scroll but section to remain sticky once the user scrolls to the section. This section should ...
- 1
1
vote
1
answer
59
views
Why is the text cycle I created in FramerMotion and React overlapping at seemingly random times?
I am trying to create an infinite text cycle in React using FramerMotion, showing one word at a time, and cycling to the next word every three seconds. The code below works like a charm a lot of the ...
- 11
1
vote
1
answer
109
views
Framer-motion element appears multiple times
What am I trying to do & context?
I am currently making a personal website, and I wanted center this container. You can an example on Aceternity.
With a modified version this container centered, ...
0
votes
0
answers
39
views
Framer Motion whileHover animation resets on click
I am animating two elements, which are visually on top of each other.
a text div, that onClick toggles to display a paragraph
a "book cover" div, that covers the text div until you hover ...
- 36
0
votes
0
answers
44
views
How to create a seamless infinite loop for parallax images with framer motion in React?
I have created a ParallaxText with Framer-motion in which images move. This is the code for it:
import { useRef } from "react";
import {
motion,
useScroll,
useSpring,
useTransform,
...
0
votes
0
answers
53
views
Framer motion Reorder component issue with react state of an array of objects
i have a state that gets an array of objects
each object is in this form
{
unnacurate: false,
useless: false,
other: false,
otherValue: '',
...
