Lazy-Load.ts
export { domAnimation as default } from 'framer-motion';

import { m, LazyMotion, useAnimation, useMotionValue } from 'framer-motion';
import { FC, useEffect } from 'react';

// only way to keep bundle size small
const loadFeaturesAsync = async () =>
  await import('./Lazy-Load').then(res => res.default);

// it works when features are loaded synchronously like, but bundle size increases
// import { domAnimation } from 'framer-motion';
// <LazyMotion features={domAnimation}>

export const AnimationTest: FC = () => {
  const controls = useAnimation();

  const variants = {
    foo: { x: 100 }
  };

  const childVariants = {
    foo: { backgroundColor: '#fff' }
  };

  const x = useMotionValue(0);
  const backgroundColor = useMotionValue('#000');

  useEffect(() => {
    controls.start('foo').then(() => {
      console.log('variants result: ', [x.get(), backgroundColor.get()]);
    });
  }, []);

  return (
    <LazyMotion features={loadFeaturesAsync}>
      <m.div
        animate={controls}
        variants={variants}
        style={{ x }}
        onAnimationStart={() => {
          console.log('onAnimationStart outer');
        }}
        onAnimationComplete={() => {
          console.log('onAnimationComplete outer');
        }}
      >
        <m.div
          variants={childVariants}
          style={{ backgroundColor }}
          onAnimationStart={() => {
            console.log('onAnimationStart inner');
          }}
          onAnimationComplete={() => {
            console.log('onAnimationComplete inner');
          }}
        >
          Hello
        </m.div>
      </m.div>
    </LazyMotion>
  );
};