Responsive center Animation in Framer Motion - reactjs

Question

I have a logo SVG that I want to come to the center of my page on screen load. I want it to animate and then animate to its spot in the navbar.
Right now because the logo changes size as the screen increases size up to a point using a vw on my x property starts to break down at different screen sizes.
Using 50vw seems to center the SVG from the left side, which does not look good, so the x in VW needs to change as the page size increases.
Is there a way to center this animation on my page like I would in a flex box, so I don't have to make a ton of break points for my animation?
so I need something like this but something that would actually cause the animation to stay centered in the page no matter what size.
const svgVariants = {
hidden: { scale: 0.1, rotate: -360, x: "50vw", y: "100px" },
visible: {
scale: 2,
rotate: 0,
x: "50vw",
y: "100px",
transition: { duration: 2 },
},
exit: {
x: 25,
},
};
const svgVariants2 = {
initial: { scale: 2, translateX: "50vw", y: "100px" },
animate: {
scale: 1,
translateX: "0vw",
y: "0px",
type: "spring",
ease: "easeInOut",
transition: { duration: 2 },
},
};

Answer 1

today I had the same problem and I solved in this method:
const centerScreenAnimationVariant = {
initial:{
x:"50%",
y:"50%"
},
animate:{
x:"0%",
y:"0%",
translateX: "-50%",
translateY: "-50%",
}
}
but you need to add to the motion.img this css:
.center{
display: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}