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

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

"Enhancing user experience with React.js and Socket.io: dynamically updating list item positions based on

export default class ReactApp extends React.Component { constructor(props) { super(props) this.state = { status: [], services: [] } fetchData((err,opt, data) => { function Exists(l ...

javascriptreactjssocket.ionext.js

Using the CSS selector :contains() does not function properly when there are line breaks present

<div>A very lengthy text that goes on and on</div> When rendered, A very lengthy text that goes on and on will appear as HTML removes the line breaks. However, locating the div using the :contains() CSS selector is challenging due to the lin ...

jqueryhtmlcssjquery-selectors

An ideal loader may be necessary to manage this particular file format

After using npm publish to create a package and then installing it in a new project, I encountered the following error: > ./node_modules/react-js-validator/src/inputs/EmailInput.js Module parse failed: Unexpected token (38:12) You may need an appropria ...

reactjsnpmbabeljs

Having trouble locating the react-redux context value while enclosing App within a provider?

Currently, I am attempting to enclose my top-level App in nextjs within a Provider because I need to make a request to the backend on every page refresh. This method appears to be the simplest approach at the moment. I referred to a suggestion on stackover ...

reactjsreduxnext.js

Tips for correctly specifying the types when developing a wrapper hook for useQuery

I've encountered some difficulties while migrating my current react project to typescript, specifically with the useQuery wrappers that are already established. During the migration process, I came across this specific file: import { UseQueryOptions, ...

reactjstypescriptaxiostypescript-genericsreact-query

As the background image shifts, it gradually grows in size

I'm attempting to create an interesting visual effect where a background image moves horizontally and loops seamlessly, creating the illusion of an infinite loop of images. Using only HTML and CSS, I've run into an issue where the background ima ...

javascriptjqueryhtmlcss

Troubleshooting: React is not defined in Rollup + React 17 with updated JSX Transform

I'm currently working on prototyping a microfrontend architecture using Rollup and multiple create-react-app applications. However, when I try to locally yarn link my external app with the container app, I am encountering the following error: The err ...

javascriptreactjsreact-routerrollupjs

Tips for redirecting a port for a React production environment

I am currently setting up both Express.js and React.js applications on the same Ubuntu server. The server is a VPS running Plesk Onyx, hosting multiple virtual hosts that are accessible via port 80. To ensure these apps run continuously, I have used a too ...

javascriptnode.jslinuxreactjsexpress

Establish the starting time for the timer and use the setInterval() function according to the seconds stored within the object

How can I configure the values of timerOn, timerTime, and timerStart to make the watch start counting from 120 seconds? Currently, the clock starts counting from 3 minutes and 22 seconds, but it should start from 2 minutes. You can find all the code here: ...

javascriptreactjs

Oops! An issue occurred during bundling: Unable to locate preset "module:metro-react-native-babel-preset" in the directory "C:\Users\..."

I recently started working with react-native and I keep encountering an error when I execute react-native run-android My package.json was functioning properly before, but now it appears to be causing issues. This is my current package.json file: { "n ...

reactjsreact-nativenpmnpm-scripts

Utilizing React Higher Order Components with TypeScript: can be initialized with a varied subtype of restriction

I am currently working on creating a Higher Order Component (HOC) that wraps a component with a required property called value, while excluding its own property called name. import React, { ComponentType } from 'react'; interface IPassThro ...

reactjstypescripttypescript-generics

What is the best way to arrange div elements in this particular manner using CSS?

Wanting to create a specific layout for my website by positioning some divs in a unique way and adding content to them, I have been focusing on responsive design. I am wondering if it is possible to position these divs while ensuring responsiveness. The de ...

htmlcss

What is the best way to vertically align items within a <div> using CSS in a React application?

The layout of the page looks like this: I am trying to center the Redbox (containing '1') within the "PlayerOneDiv". Similarly, I want to center the yellow box within "PlayerTwoDiv". return (<div className="App" ...

htmlcssreactjsangularflexbox

Customize the color of a specific day in the MUI DatePicker

Has anyone successfully added events to the MUI DatePicker? Or does anyone know how to change the background color of a selected day, maybe even add a birthday event to the selected day? https://i.stack.imgur.com/or5mhm.png https://i.stack.imgur.com/so6Bu ...

reactjstypescriptreact-nativereact-reduxmaterial-ui

What is causing jQuery toggleClass to fail in removing a class?

I have successfully implemented a Skills accordion feature, but I am now trying to add a button that toggles all the skill sections at once. However, I am facing issues with jQuery not correctly adding or removing classes on the .accordion-trigger-all elem ...

javascripthtmljquerycss

Shifting the position of an HTML page to one direction

I'm currently working on adding a sidebar to my Twitter Bootstrap 3 project. The goal is to have a fixed positioned nav nav-pills nav-stacked show up on the left side of the page when a button is clicked. I've set its z-index to 1000 so it appear ...

javascriptjqueryhtmlcsstwitter-bootstrap

Creating a MUI Datagrid with Individual Row-Controlled Checkboxes

One method of integrating Checkbox or TextField is by utilizing renderCell, which successfully displays the Checkboxes: https://i.stack.imgur.com/IyNRC.png However, I am unsure about how to individually control the Checkbox/TextField for each row. For in ...

reactjsmaterial-uimui-x-data-grid

Unable to navigate through select2 dropdown if fixed div is present

I am facing an issue with select2 in my fixed div popup that acts like a modal. The problem is that when the select2 dropdown is open, I am unable to scroll the div until I close the dropdown. This becomes problematic on smartphones because the keyboard e ...

javascriptjqueryhtmlcssjquery-select2

Navigating, rendering, and redirecting using react-router-dom

Recently, I inherited a React project from a coworker and as I delved into the code provided below, I found myself perplexed by its logic. content = <Switch> <Route path="/login" exact component={LoginPage} /> <Route r ...

reactjsreact-router-dom

Selecting a date in a pop-up

In my PHP application, I have incorporated a date selection feature within a modal dialog. However, when clicking the control, the calendar appears in the left corner of the page and remains visible even after selecting a date. Additionally, clicking elsew ...

htmlcssdatepicker