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 the allow-discrete transition-property value, properties like display can also be used in transitions.

[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.