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
May I suggest the react-spring library?
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