firefox is experiencing lag issues with react-spring and framer-motion

Encountering an issue with two animation libraries, react-spring and framer-motion. Attempting to create a basic animation that triggers upon the component's initial visibility (simplified version).

<motion.div initial={{x: -25, opacity: 0}} animate={{x: 0, opacity: 1}} transition={{duration: 2.5}} className="App-logo">NAME</motion.div>

Github project

On Chrome, Brave, and Edge browsers, the animation appears smooth. However, on Firefox browser, there is noticeable lag during the animation's conclusion. This behavior persists across both framer-motion and react-spring implementations. Adjusting the duration of the transition or the amount of translation improves the appearance slightly, but does not fully resolve the lagging issue.

Attempting the same animation using plain CSS results in consistent smoothness across all browsers. Despite searching for solutions, no definitive answers have been found to address this specific problem.

cssreactjsanimationreact-springframer-motion

Answer №1

It appears that the discrepancy in rendering performance between Firefox and Chrome may be attributed to their respective rendering engines. While Firefox positions the div pixel by pixel without subpixel rendering, Chrome may approach it differently. This difference becomes more apparent when a slight rotation is added to the div, causing Firefox's engine to skip optimization.

<motion.div initial={{x: -25, opacity: 0, rotation: 0.02}} animate={{x: 0, opacity: 1, rotation: 0.02}} transition={{duration: 2.5}} className="App-logo">NAME</motion.div>

Update: In reference to your git repo, an example has been added. Notably, adding rotation to the first two lines results in smoother animation in Firefox compared to the last line.

https://codesandbox.io/s/happy-cannon-tew1f

https://i.sstatic.net/gf7is.gif

Answer №2

After experiencing laggy animations on Chrome, I decided to make a change that significantly improved performance. The animations now run much more smoothly. If you're having similar issues, give this solution a try on Firefox and let me know if it works for you.

When using Framer Motion, avoid declaring animations directly inside JSX. Instead, utilize variants for a cleaner approach.

Here's the updated code:

 <motion.div
    variants={variants}
    initial="initial"
    animate="animate"
    exit="exit"
    transition="transition"
    >

      <Outlet />
    </motion.div>

Variant object:

 const variants = {
    initial: {scale:0, opacity:0},
    animate: {scale:1, opacity:1},
    exit: {x:200, scale:0, opacity:0},
    transition: {type:"spring", duration:1.5}
  }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to effectively manage an overflowing navigation bar

I am currently facing a challenge with the main navigation bar on my website, specifically with how it handles an overflow of links on smaller screen resolutions. I have attempted to adjust the height of the navigation bar at smaller media queries, but I&a ...

phpjqueryhtmlcss

Styling Material UI components with CSS is a great way to

I'm facing difficulties while working with Material UI components. Currently, I have a Material UI table and I want to center-align the text within it. The standard CSS of Material UI contains an element named MuiTableCell-root-60 which has a text-a ...

cssmaterial-ui

Connecting a GraphQL API to a front-end application on an Nginx server hosted on an EC2 instance:

My App consists of three projects structured as follows : mainapp ->/packages ->/admindashboard ->/shopapp ->/api To deploy the project on an Ec2 instance (where I am not the administrator), I compiled the admindashboar ...

node.jsreactjsnginxgraphqlnext.js

"Error: The update depth has exceeded the limit while trying to use the

I've been working on implementing localStorage in NextJs using TypeScript by following this guide at , but I am encountering an error. https://i.sstatic.net/NX78a.png Specifically, the error occurs on the context provider repeatedly. Below is the c ...

reactjstypescriptreact-hooksnext.jslocal-storage

Utilizing ThreeJS alongside React version 16

I'm currently attempting to display 3D files in my react project using ThreeJS. My react project is running on version 16.13.1. Upon installing the packages @react-three/fiber and @react-three/drei, I encountered an error stating "Module not found: Ca ...

reactjsthree.jsreact-three-fiberreact-three-drei

Tips for maintaining user authentication in my application (Firebase and React)

I am encountering an issue in my app where, after successfully signing in with email and password, if I reload the page, the user is automatically logged out. How can I prevent this from happening so that users remain signed in even after reloading the pag ...

reactjsfirebaseauthenticationfirebase-authenticationlocal-storage

How to show a placeholder in a select input using ReactJS

I'm currently trying to incorporate placeholder text into a select input field using ReactJS, but it doesn't seem to be working as intended. Here is the code snippet I am working with: <Input type="select" placeholder="placeholder"> ...

javascriptreactjs

As the width decreases in animation, the content gradually disappears until it reaches zero

My issue involves red and black divs; when I hover over the parent element, the red div should appear by expanding to its full width. However, a problem arises when the width is set to 0px as the content still shows. Can someone provide assistance on how t ...

jquerycss

Using jQuery to dynamically disable a textbox when a checkbox is checked

I'm trying to implement a functionality where a textbox becomes disabled and changes its background color when a user unchecks a checkbox. Conversely, if the user checks the checkbox, the textbox should become editable and change its background color ...

jqueryhtmlcss

Clicking React useState causes it to update before the intended click is registered

My goal is to create 50 buttons that, when clicked, will update the value of useState to the current button number (array index+1). However, I've encountered an issue where I have to click a button twice to get the correct value. The first click alway ...

javascriptreactjs

Alignment issues with the layout

I am facing an issue with two containers stacked on top of each other. The bottom container is wider than the top one, and both have auto margins set for the left and right sides. I want the top container to be aligned evenly on top of the bottom one. I c ...

htmlcsslayoutcss-float

Adjusting the size of Bootstrap alerts while ensuring the close icon remains correctly positioned

Below is the HTML code snippet I am working with: <div class="row mt-2"> <div class="col-lg-5"> <div id="alertmessages"></div> </div> <div class="col-lg-7"> <div class="btn-group-sm"> ...

javascriptcssbootstrap-4

Retrieving data using Next.js 'catch-all' routes

Using Next.js 10, you now have the ability to create a catch all route that looks something like this: [...id].tsx. This enables the development of dynamic pages that can match paths such as /example, /example/new, and /example/new/latest. However, one is ...

reactjsnext.jsgetstaticprops

Using jQuery to extract the value of an object from an <li> element and updating the class attribute of the <li> element

There is a div element: <div id="ddDistr" class="searchBoxSortDistrict" tabindex="1"> <ul id="ddd"> </ul> </div> I have inserted HTML from json into it: $("#ddd").html(" "), $.each(dis, function( index, value) { $("#dd ...

javascriptjqueryhtmlcss

Discovering the font-weight attribute in Selenium IDE

Currently, I am working with Selenium IDE and aim to detect when a text element has the 'font-weight:bold' CSS property applied to it using 'verifyAttribute'. The specific CSS locator being used is: css=body.home.es ul#languages li:nt ...

cssdomseleniumcss-selectorsselenium-ide

When the screen size decreases, display the title on two lines

Currently, I am in the process of developing a react web application with the assistance of redux. My main objective is to ensure that the page is highly responsive. At this point, there is a title positioned at the top displaying: Actions to do: Past due ...

htmlcssreactjs

Attach a child element to the bottom of its parent div when the parent div reaches the bottom

I'm looking to make a child div stick to the bottom when the parent div reaches the bottom of the browser window. Note: This behavior should only occur when the parent div is pushed down, not when the page is scrolled down. For instance, in my demon ...

javascriptjqueryhtmlcss

Ways to generate multiple choices for options

Is there a method to provide multiple options within an option? I am utilizing CSelect to create options. One of the options needs to include additional options. <CSelect custom name="select_pattern_filter" id="select_pattern_filter" ...

htmlreactjs

Determining the width of an element in terms of percentage

My issue involves input elements with widths set as percentages in CSS under the common class 'display-class' For example: input.test1 { width: 60% } In JavaScript, I am attempting to wrap a div around these input fields with the same width ...

javascriptcssdom

Changes to a key value are not reflected in the array of objects

When making changes to input fields within an array of records that include Date and Text fields in a table, the data is not updating as expected. I am encountering issues where changing the Date input results in undefined Text values, and vice versa. My g ...

javascriptreactjs