Conflict with Framer motion container

[venkatesh1146]

Hi,

Thank you for the awesome lib. 😄 🍰

I am having an issue while rendering the animated numbers in the framer motion animated container. Currently it is like below https://user-images.githubusercontent.com/115448824/231689346-f18847e3-0912-4aac-8e60-684c51eb78ac.mov

Stack:

• "react": "18.2.0",

• "react-animated-numbers": "^0.16.0",

• "framer-motion": "^10.11.5",

• "next": "12.3.1"

Relevant code:

import AnimatedRollingNumber from '@/RollingNumbers';
import { motion } from 'framer-motion';

const zoomOut = {
    hidden: {
        transform: "scale(0.5)",
        opacity: 0,

    },
    visible: {
        transform: "scale(1)",
        opacity: 1,
        transition: {
            duration: 0.2
        }
    },
    exit: {
        transform: "scale(0.5)",
        opacity: 0,
        transition: {
            duration: 0.1
        }
    }
};

export default function Home() {

  return (
    <div style={{height:"100vh",width:"100vw",display:"flex",justifyContent:"center",alignItems:"center"}}>
      <motion.div
        style={{
        border:"1px solid white",
        height:"300px",
        width:"300px",
        display:"flex",justifyContent:"center",alignItems:"center"
        }}
        variants={ zoomOut}
        initial="hidden"
        animate="visible"
        exit="exit">
         <AnimatedRollingNumber amount={45678} />
      </motion.div>
    </div>
  )
}

[venkatesh1146]

50

[heyman333]

Updated library to use framer-motion. Please check again.

[venkatesh1146]

Thank you @heyman333