What is the proper way to smoothly scale an element to nothing and then back to its original size-CodePudding

This is how I do it in React:

  const animate_boxes = () => {
    inner_ref.current.style.transform = "scale(0)";
    setTimeout(() => {
      if (inner_ref && inner_ref.current) {
        inner_ref.current.style.transform = "scale(1)";
      }
    }, 200);
  };

For some reason, it is not dependable. the setTimeout may not always get run. Still haven't figured out why yet. But If there is an alternative way to do it, then please write a solution.

thanks

CodePudding user response：

May I suggest the react-spring library?

CodePudding user response：

Use framer motion library with scale property passed in as an array of values eg :

import {motion} from 'framer-motion'


const Component = () => {
   return (
     <motion.div
         initial={{scale: 1}}
         animate={{scale: [0.1, 1]}}
     >
         hi
     </motion.div>

   )

}

Refer this docs for more examples - Docs