All Questions
Tagged with framer-motion reactjs
815 questions
1
vote
0
answers
4
views
Framer Motion Exit Animation Not Triggered
Why is the exit animation not working?
`'use client';
import React from 'react';
import { motion, AnimatePresence } from 'framer-motion';
export default function TransLayout({ children, ...
- 11
0
votes
1
answer
29
views
How to run sequential animations without one overlap the other framer motion
I'm working on a React project using Framer Motion and need to run multiple animations sequentially. Each animation should start only after the previous one finishes, ensuring no overlap.
For example:
...
0
votes
0
answers
17
views
Change width and height according to scale using tailwind
I am trying to adapt the width and height of each li element, so that they don't overlap when active (scale: 5). Anyone knows how can I achieve this? Thank you :)
The navbar snippet:
<ul
...
0
votes
0
answers
22
views
How can I create a page movement motion similar to native web using React and framer motion?
I am building an application using React (SPA) based on Vite and react-router-dom. This project is a project that enters the web view.
Therefore, like in an application, when moving a page (push), I ...
1
vote
0
answers
16
views
Layout Shifts in React during Ordered Animations (Typing and Fade-in Effects)
I'm experiencing layout shifts in my React application, particularly when animating components in order. The issue arises when I try to animate Heading with a typing animation and then animate the ...
- 21
0
votes
1
answer
49
views
Correct Way to Integrate Motion and Lenis with React 18.3.1 in Vite?
Please i came up with this but i'm not exactly sure if this is the way to use the new 'motion' library with lenis and typescript in [email protected] (vite as builder). Is this correct?
This here is my App....
3
votes
3
answers
1k
views
REACT.js Failed to compile: unexpected end of JSON input error
When I run 'npm run build' I get the following error:
> [email protected] build
> react-scripts build
Creating an optimized production build...
Failed to compile.
Unexpected end of JSON input
...
- 33
0
votes
0
answers
19
views
Invoke function on mouse over with framer motion
I'm trying to recreate the following codepen with framer motion:
https://codepen.io/Hyperplexed/pen/rNrJgrd?editors=0010
It doesn't animate, and I think the ref is not used by the function or framer ...
- 455
0
votes
0
answers
64
views
framer motion path length animation not working in safari
i have an svg path length animation with framer motion and nextjs, the animation works perfectly fine in both firefox and chrome but does not work on safari
is there is any way to fix this issue ? or ...
0
votes
1
answer
39
views
How to Properly Use React.memo with Framer Motion and Next.js Image Component
I'm working on a Next.js project where I need to display hero images using the Image component from next/image and animate them with framer-motion. I also want to optimize performance by using React....
0
votes
1
answer
49
views
CSS Infinite Vertical Scroll for Arrow Image Background Without Gaps
I'm trying to create an infinite vertical scrolling effect for an arrow image (1101px in height) that scrolls from top to bottom without any visible gaps. The image is intended to repeat seamlessly, ...
- 21
0
votes
1
answer
27
views
Transition duration does not work for variants with `framer-motion` library
With this code I would expect that on first data change animate will run for 1 second and after that will go to initial state, eg be reverted.
But it stays for a whole time, constantly
const variants =...
- 3,766
0
votes
0
answers
94
views
Add a className property to a custom Framer Motion component in React
I am new to Framer Motion. I saw on their site that in order to add a class to a custom element, I had to create an override:
import type { ComponentType, FC } from "react";
export function ...
- 23
1
vote
0
answers
19
views
AnimatePresence Is not yielding to the CSS overflow hidden
I'm trying to build a Text Slider that slides text indefinitely from top to bottom, I've tried Wait, It is slow, and sync, which had some layout issues where the text(initial) goes beyond where it's ...
- 11
0
votes
0
answers
85
views
Framer Motion Appear text animation
Hi Need to animate the text like https://theshift.tokyo/en/project/bbf-gate-system-vid/
can any one help me to understand how to get it.
- 2,018
0
votes
0
answers
26
views
The staggerChildren exit transition is not working within AnimatePresence - React & Framer Motion
I am unable to get the staggerChildren working on conditionally rendered navigation within AnimatePresence, specially for the exit part. I am stuck on this part since 2-3 weeks now. I have mentioned ...
- 1
0
votes
0
answers
84
views
Carousel in Nextjs using Framer-motion
Hi there!
I'm working on Nextjs+typescript and using framer-motion for animations. I'm trying to create this Carousel for quite some time now and I'm stuck. This is what it should look like:
www.hover....
0
votes
0
answers
21
views
Vertical Scroll Bar Appears on Mabel Info Popup in Vite Memory Card Project
I'm working on a memory card project using Vite, and I've run into an issue with a popup component. When the Mabel info pops up after clicking the question mark, a vertical scroll bar briefly appears, ...
- 11
0
votes
1
answer
35
views
onReorder in framer motion is not working for images
I am using framer-motion library to re-arrange the images of the gallery
import React, { useState } from "react";
import { Reorder } from "framer-motion";
const Test = () => {
...
1
vote
0
answers
79
views
Framer Motion: flexbox with justify-content: space-around or gap causes layout animation to break
I am trying to achieve a smooth transition in a flexbox when an element is removed.
It seems that when a flexbox uses gap or justify-content property, the space around the removed element disappears ...
- 377
0
votes
0
answers
20
views
Framer-motion animations don't relaunch when I change product page
When I change page on the site all my animations are launched, when I go once to the product page they are launched too but when I switch from one product to another the animations are not relaunched. ...
- 1
0
votes
0
answers
39
views
framer-motion animation isse when switching from `hidden` tab
I have the following motion.div component in one of my tabs:
<motion.div
className='relative flex flex-col gap-4'
animate='visible'
initial='hidden'
...
- 187
0
votes
0
answers
37
views
How to enable <Link> and <a> inside motion.div
I'm applying a slide animation using framer-motion, but inside each slide item there's an <a> tag, but due to the motion it cannot be clicked.
<motion.div
ref={carrossel}
className="...
- 428
0
votes
1
answer
103
views
how to fix function component cannot be given refs while using framer motion useAnimate hook?
Navbar component code
import Humburger from "./ui/Humburger";
const navlins = ["HOME", "PAGES", "PRODUCTS", "ARTICLES", "CONTACT"];
const ...
- 35
0
votes
1
answer
54
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
48
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
-1
votes
1
answer
33
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
1
answer
47
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
246
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
97
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
81
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
4
votes
1
answer
266
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,617
0
votes
2
answers
140
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
0
votes
0
answers
14
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,172
0
votes
1
answer
176
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
22
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
12
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
94
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
92
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
23
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
0
votes
0
answers
9
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
0
answers
22
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
24
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
31
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 ...
- 51
0
votes
0
answers
28
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
0
answers
202
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. ...
- 508
0
votes
0
answers
97
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 ...
- 632
1
vote
1
answer
45
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,665
0
votes
0
answers
36
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 { ...
- 81
2
votes
2
answers
216
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