motion: [BUG] Laggy in Firefox

Description

When using framer-motion, all used animations are lagging on Firefox, even the ones from the Example page. I’ve tried it on Chromium and saw no issue whatsoever in a laggy animation. FPS also seem fine (28-30fps).

CodeSandbox

Even tho you require a CodeSandbox for reproduction, it’s not actually needed, as this also happens with the Examples on the Framer Motion page (or Docs). https://www.framer.com/api/motion/examples/

Code example I’m using as of now:

const variants = {
  open: { opacity: 1, y: 0 },
  closed: { opacity: 0, y: '15px' },
}

<motion.div initial={false} animate={shareBarVisible ? 'open' : 'closed'} variants={variants}>
  <ShareBar>
    <QuickShareBar>
      <FacebookShareButton url="https://google.com/">
        <FacebookIcon size={32} round />
      </FacebookShareButton>
      <TwitterShareButton url="https://google.com/">
        <TwitterIcon size={32} round />
      </TwitterShareButton>
      <EmailShareButton url="https://google.com/">
        <EmailIcon size={32} round />
      </EmailShareButton>
    </QuickShareBar>
  </ShareBar>
</motion.div>

Steps to reproduce

Steps to reproduce the behavior:

Go to https://www.framer.com/api/motion/examples/
Scroll down to any animation
See laggyness

Expected behavior

The animation should not be laggy. See following Video: https://streamable.com/g97k9

Video

Current behavior in Firefox: https://streamable.com/m392r

Environment details

OS: macOS Catalina Browser: Firefox Developer Edition (recent public build)

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 17
Comments: 22

Most upvoted comments

this is still a major issue concerning framer-motion. animation works with all other major browsers but the laggyness of animation is still prominent in Firefox v78.0.2 (64-bit). any solutions concerning this? framer-motion is really nice and fun to work it, but Firefox support is a must.

+14

GauravRajSharma on Aug 4, 2020

This can be fixed on a per-site basis by serving content with the following headers:

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

From https://developer.mozilla.org/en-US/docs/Web/API/Performance/now#Reduced_time_precision

mattgperry on Sep 1, 2020

Crazy find! Here’s the bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1394735#c1

mattgperry on Aug 28, 2020

Hi I am a super beginner running into the same problem, I have adopted @visualcookie 's suggestion to add the COOP and COEP headers to enable the high precision timer, yet the problem persisted on Firefox (Mobile mode / on Mobile device only).

May I ask @visualcookie whether you have resolved this problem completely? Thank you!

I am using Next js hosted on Vercel and I added the headers via next.config.js

//next.config.js

module.exports =  {  
 async headers() {
    return [
      {
        source: '/',
        headers: [
          {
            key: 'cross-origin-opener-policy',
            value: 'same-origin',
          },
          {
            key: 'cross-origin-embedder-policy',
            value: 'require-corp',
          },
        ],
      },

 //... other configs

 }

Evidence of high precision timer is successfully turned on via adding COOP and COEP:

zefaurios on Apr 22, 2021

When it will be fixed? Very laggy on firefox

olegKusov on Mar 4, 2021

This can be fixed on a per-site basis by serving content with the following headers:
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp
From developer.mozilla.org/en-US/docs/Web/API/Performance/now#Reduced_time_precision

Neat idea. How will this work with SPA applications deployed to Heroku, Vercel and Co?

visualcookie on Sep 2, 2020

I’m also experiencing laggy animations in FF. Using Developer edition 73.0b12 (64-bit)

stolinski on Feb 5, 2020

Closing as wontfix (cantfix). This is really crazy but Firefox is throttling all requestAnimationFrame animations until the page is interacted with (scroll and then replay the first animation to see)

mattgperry on Jan 20, 2020

Has anyone found any other possible solution to this problem? Passing COOP and COEP headers achieved nothing in my project and some of my animations remain choppy. Weirdly enough I experience this only on yoyo animation that changes scale, other animations are completely fine.

opohorel on Dec 1, 2021

What did it for me was setting privacy.resistFingerprinting to false in the about:config. Apparently that also worked for react-spring animations, as things that were using react-spring in my code were not even showing up.

I know it’s only a temporary fix, but maybe it helps the guys behind this library to figure out a way to actually remove the laggyness.

visualcookie on Aug 28, 2020

Weird, tried that on the examples page, but still experience the laggyness.

visualcookie on Jan 22, 2020

Hmm yeah this is really noticeable. Thanks for letting me know, I’ll look into it.

At first glance I reckon something is skipping every other frame. As the “laggyness” looks pretty consistent to me, possibly a solid 30fps.

mattgperry on Jan 20, 2020