search

ItsJonQ / g2

✨ An experimental reimagining of WordPress components
http://g2-components.com/
MIT License
105 stars 12 forks source link

Framer Motion: IE11 Issues #278

Open ItsJonQ opened 3 years ago

ItsJonQ commented 3 years ago

Looks like Framer Motion is causing IE11 rendering issues: https://github.com/WordPress/gutenberg/issues/28249

We currently don't use it in many places.. Collapsible is the only one that comes to mind (and Navigator 🙈 ) In that sense, we could remove it 🤔

It would be a shame to lose this library for future animation work.

React Spring is compatible with IE11: https://github.com/pmndrs/react-spring/issues/552#issuecomment-464680114

It looks like we're already using it in Gutenberg: https://github.com/WordPress/gutenberg/blob/da8555d258edbe676fa079fb51252f918ae032e1/packages/block-editor/src/components/block-navigation/leaf.js

ItsJonQ commented 3 years ago

The main component we rely on Framer Motion for (at the moment) is Collapsible. Replacing it with react-spring would mean writing something like this:

https://gist.github.com/ItsJonQ/31c470eb64cbce3762db19dd7841206e

Not impossible.. it's just very manual (not to mention direct imperative DOM style manipulation is required)

ItsJonQ commented 3 years ago

Refactoring Navigator will be tricky as well... 🙈

ItsJonQ commented 3 years ago

Current working branch: https://github.com/ItsJonQ/g2/tree/update/remove-framer-motion-for-react-spring

stokesman commented 3 years ago

Have you seen https://github.com/framer/motion/pull/781? I don't think that's made it into their docs yet.

ItsJonQ commented 3 years ago

@stokesman I have! I found it when I was reading their much larger issue: https://github.com/framer/motion/issues/364

I could give this a shot 🙏 . Although, we'd have to figure out polyfills still (since they aren't providing them).. and something to do with code splitting?