Motion: [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 [e-mail] 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?