React-spring: Animations do not start when rendering outside of an iframe (firefox)

[james2406]

I'm working on a react project where I'm rendering to the parent page from within an iframe. Unfortunately, when I run the following code in firefox, the animation does not start. The div stays at 0 opacity:

function App() {
  const spring = useSpring({ from: { opacity: 0 },  opacity: 1 });

  return (
    <animated.div className="App" style={spring}>
      <h1>React Spring</h1>
    </animated.div>
  );
}

ReactDOM.render(<App />, parent.document.getElementById('app'));

I took a look through the source code, however, I can't seem to see any references to the window or document, so I'm not too sure what could be causing this issue.

Version 6, 7 and 8 all have the same issue. I'm using 8.0.7 right now.

[jacobrask]

Hi, can you show a full code example, preferrably on codesandbox? I'm thinking it could possibly be some instanceof check failing?

[james2406]

I can't figure out how to configure the sandbox to work with the same setup I have, however, it looks like I can work around the issue by using the immediate property.

Unfortunately, Firefox would still crash with the error outputRange[0].match(...) is null however, I managed to fix the issue by avoiding interpolations!

[dominiczaq]

Hey, I've bumped to this issue today and I don't think the problem lies with react-spring but with how Firefox handles requestAnimationFrame callbacks which are fired from different window context.
I've had the same issue previously with https://github.com/missive/emoji-mart - https://github.com/ryanseddon/react-frame-component/issues/132#issuecomment-459721310

Fortunately, while digging through react-spring codebase I found that there's already injectFrame function https://github.com/react-spring/react-spring/blob/master/src/animated/Globals.ts#L28 which does exactly what is needed to make requestAnimationFrame callbacks work in Firefox. Just drop

import { Globals } from 'react-spring';

Globals.injectFrame(
    requestAnimationFrameFromProperContext,
    cancelAnimationFrameFromProperContext,
        );

In my case, I'm using react-frame-component - https://github.com/ryanseddon/react-frame-component#accessing-the-iframes-window-and-document so in that case it would be window.requestAnimationFrame from FrameContextConsumer

Hope this helps!

[phaistonian]

@dominiczaq Also using react-frame but I am a bit confused as to where to add this block at.

Could you elaborate more?

[dominiczaq]

sure, I've added the block in the first component in the application. Animations are deep down in the application tree.

[phaistonian]

@dominiczaq So you "pass" the window.requestAnimationFrame down from the FrameContext by wrapping it to passed children?

Can you share this bit, i.e the code block?:)

Update: got it - thank you:)

[bsdahl]

Okay, so how would you solve this if you are rendering into multiple iframes? I have an app that is executed inside an iframe, but renders into the parent iframe, and into child iframes. Since react-spring uses Globals, and injectFrame overwrites the globals, it seems that I can only ever have one instance of requestanimationframe?

Here is a diagram for additional context:

<ParentWindow>
  <Iframe>
    <ReactApp/>
  </Iframe>
  <DomRenderedByReact>
    <Iframe1>
      <DomRenderedByReact />
    </Iframe1>
    <Iframe2>
      <DomRenderedByReact />
    </Iframe2>
  </DomRenderedByReact>
</ParentWindow>

My React app is executed in the first sourceless iframe, and reaches up and renders dom into the parent window, and into child iframes.

I got it working by setting Globals.injectFrame() to the parent window requestAnimationFrame so that I could animate dom in the parent window. But animations in child iframes can't update.

If I call Globals.injectFrame() again later in the render tree using the iframe window context, it overwrites the requestAnimationFrame used higher up in the tree. ¯_(ツ)_/¯