Atlaskit's motion: ExitingPersistence does not work

Jira Development Jira Cloud
1

Hello! I am trying to animate my components using the motion package but, the exit animations with ExitingPersistence are not working…I have spent a lot of time trying to debug but couldn’t figure out what’s wrong. here is the sandbox

surprisingly, the animation works here:

Please help

2

Hey @GHMahimaanvita. This is really interesting. I’m able to get the example working by changing index.js back to the old render syntax:

import React from "react";
import ReactDOM from "react-dom";
import Example from "./App";

ReactDOM.render(<Example />, document.getElementById("root"));

You can see a working sandbox of it here: base (forked) - CodeSandbox (I haven’t changed your App.js at all in my fork)

So, it looks like upgrading to createRoot() syntax is what breaks it. Currently, @atlaskit/motion supports "react": "^16.8.0". So, it’s unlikely that this will get fixed until we start supporting React 18 (which is when createRoot was introduced).

As a workaround, if you’re able to, using the old ReactDOM.render() syntax should work. I believe you’re still able to use this syntax while using React 18.

1 Like
3

@SamScheding Yes that worked. Thank you.
I tried removing StrictMode from my code and that worked too… I’m not sure why it’s the case though

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
    <App />
);
4

What is the timeline for react 18 in atlas kit?