[BUG] Laggy in Firefox

[visualcookie]

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:

1. Go to https://www.framer.com/api/motion/examples/
2. Scroll down to any animation
3. 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)

[mattgperry]

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]

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]

Edit: I'm not actually sure what the interaction criteria is but my animations are no longer lagging in Firefox so they do have one.

[visualcookie]

@InventingWithMonster Did you change something on your animations?

[mattgperry]

No it’s the same page. They started running smoothly when I clicked or scrolled, I can’t remember.

On Tue, 21 Jan 2020 at 14:07, Dean Hidri notifications@github.com wrote:

@InventingWithMonster https://github.com/InventingWithMonster Did you change something on your animations?

— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub https://github.com/framer/motion/issues/441?email_source=notifications&email_token=AB34WKTOSTYDSPSLSKSJLBDQ63XRTA5CNFSM4KJFSGP2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEJPVG2Y#issuecomment-576672619, or unsubscribe https://github.com/notifications/unsubscribe-auth/AB34WKSG3CXLP2PQ2H4V4ETQ63XRTANCNFSM4KJFSGPQ .

[visualcookie]

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

[stolinski]

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

[iamawebgeek]

Noticing some micro freezes as well, using FF 72.0.2

[michelecocuccio]

Hello. I have created a light-box for React which is now available as npm package. In my next release I am going to move from React Transition Group to Framer Motion as I really want to add physic animations for the slides. I am noticing that on FireFox the animation is super laggy. On Edge, Chrome and Safari they run smoothly. There are two things that I have noticed:

I am using framer motion to animate two things: 1) the main div containing the light-box which has a position: fixed, it's just animating the opacity. The background-color of the div can be an rgba value passed by the user.

2) the images that the user navigates through. In this case I am using <AnimatePresence /> The image will slide left or right.

So I have noticed that if I change the position from "fixed" to "absolute" the animation runs smoothly. Please check this video: https://drive.google.com/file/d/1HOOqYbGeA1GTnvO_D3r7xLAWBbjtHe8P/view (In this video, I am comparing chrome and firefox. Please pay attention to the browser used during the video but it should be obvious)

Also I have noticed that the animation seems very laggy if I have a background color with an rgba value on it with some transparency. Please, check this short video: https://drive.google.com/file/d/1vgP_brwRezuOLG3ngtDRIpFqR8ILnkmf/view

that's really odd! I need that position to be fixed as the main purpose of a light-box is to stay "fixed". I haven't released the new version to the public yet but I am planning to do so very soon and I will share the demo on code sandbox.

Thanks

[GauravRajSharma]

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.

[NasTomkinson]

@GauravRajSharma I managed to alleviate some of the laggyness by turning off smooth scroll in the Browser settings. While its not a direct fix, hopefully it helps in getting an resolution to this issue overall.

[visualcookie]

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.

[mattgperry]

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

[mattgperry]

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

[visualcookie]

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?

[olegKusov]

When it will be fixed? Very laggy on firefox

[visualcookie]

When it will be fixed? Very laggy on firefox

My guess is, that you should ask this to the Firefox devs, since this is a Firefox specific issue.

@mattgperry solution would only be a temporary fix. And I'm not sure, if setting fixed HEADERS should be done by a 3rd party JavaScript package.

[jacob-jacob-jacob]

I have set privacy.resistFingerprinting and privacy.reduceTimerPrecision to false, as suggested in https://developer.mozilla.org/en-US/docs/Web/API/Performance/now#reduced_time_precision I checked if the performance timer stopped rounding and it does:

performance.now()
146902.152954

Unfortunately the animation is still laggy, see here: hed gif) the animation is very basic:

      <motion.div ....
        animate={{scale: [1.3, 1.6]}}
        transition={{
          duration: 1, repeatType: "reverse", repeat: Infinity
          }}
      >

and works in chromium. I like the library, but I am not able to use it if it has no Firefox support.

[visualcookie]

I have set privacy.resistFingerprinting and privacy.reduceTimerPrecision to false, as suggested in https://developer.mozilla.org/en-US/docs/Web/API/Performance/now#reduced_time_precision I checked if the performance timer stopped rounding and it does:

performance.now()
146902.152954

Unfortunately the animation is still laggy, see here: hed gif) the animation is very basic:

      <motion.div ....
        animate={{scale: [1.3, 1.6]}}
        transition={{
          duration: 1, repeatType: "reverse", repeat: Infinity
          }}
      >

and works in chromium. I like the library, but I am not able to use it if it has no Firefox support.

If you just have a simple animation like that, why even referring to this lib? You could do this with CSS Transitions. The lib itself should only be considered, when you have a toggle and conditionally animate upon that.

[zefaurios]

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:

[opohorel]

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.

[erenkulaksiz]

Hello, I've been using Framer Motion for my sideproject for a while. I've built a sidebar with width animation on collapse. Theres nothing wrong with it and it works amazing. But theres one catch: when content is filled with stuff, sidebar width animation starts to lag out. I could'nt figure out why, on other routes which has lower components than the laggy route's components and on those routes, sidebar width animation isn't laggy at all. I know the best choice here is to build sidebar animation width with CSS, but i still want to use framer motion for this task, because when i switch to CSS, theres no point having a big chunky animation library on my project :D