Investigate removal of framer-motion

[matthewgallo]

While framer-motion has been a very convenient tool in orchestrating animations and transitions, we've faced issues in managing it as a dependency given our requirement for continued support of React 16 and up.

After doing a quick review of where and how we're using it, I think we should be able to do everything we're currently doing with framer-motion now with native css. For example, creating an animation on render (which we've commonly relied on AnimatePresence for), can be done all in css now, here is an quick example:

.element {
  transform: translateY(2rem);
  transition-property: opacity, transform;
  transition-duration: 350ms;
  transition-behavior: allow-discrete;
}
.element.hide {
  opacity: 0;
}
.element.show {
  @starting-style {
    opacity: 0;
  }
  opacity: 1;
  transform: translateY(0);
}

See codepen example here.

With transition-behavior: allow-discrete;, properties like display can also be used in transitions.

• Find alternative solution to AnimatePresence, add fallback solution of css animation for older browsers (found that my current version of Safari doesn't support the transition-behavior property), created a prototype showing how we could do this here
• Add custom usePresence hook from prototype to ibm-products and replace AnimatePresence framer-motion component
• Refactor instances of useReducedMotion from framer-motion, we have a custom hook for this already but have also imported the reduced motion hook from framer-motion in some places
• Refactor all instances of motion.div (FilterPanel, FilterSummary, OptionsTile, SidePanel)

I think it will be easiest to go through this list above for each component individually rather than jumping across multiple components to remove singular pieces of framer-motion. I'll create sub-issues for each component that is remaining.

Example usage of usePresence custom hook for mount/unmount transitions

const MySidePanel = ({ open, children }) => {
  const { shouldRender } = usePresence(open);
  return shouldRender ? (
    <div>{children}</div>
  ) : null
}

[s100]

Removing framer-motion would also resolve the warning we see downstream during Mocha testing of an application which makes use of @carbon/ibm-products:

motion() is deprecated. Use motion.create() instead.

Alternatively, using motion.create() instead could resolve this warning in a slightly lower-effort manner...

[matthewgallo]

Hey @s100! That should no longer be an issue in 2.57.1, we rolled back the framer-motion upgrade to the previous version we had been using.

[s100]

Hey @s100! That should no longer be an issue in 2.57.1, we rolled back the framer-motion upgrade to the previous version we had been using.

Confirmed, that does actually fix it. Thanks for the tip.