@keyframes moveToCenter {
  0% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(var(--end-x), var(--end-y)) scale(2.1);
  }
}

.selected {
  animation-name: moveToCenter;
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  transform-origin: center;
}

I’m wondering if by any chance, there is a way to make an animation “scale(x)”.
Where “x” is an amount based on the current screen specs (height and width)

useEffect(() => {
    const element = elementRef.current;
    if (!element || !titleRef) return;

    const rect = element.getBoundingClientRect();
    const startX = rect.left;
    const startY = rect.top;
    const endX = window.innerWidth / 2 - rect.width / 2;
    const endY = window.innerHeight / 2 - rect.height / 2;

    element.style.setProperty("--start-x", `${startX}px`);
    element.style.setProperty("--start-y", `${startY}px`);
    element.style.setProperty("--end-x", `${endX - startX}px`);
    element.style.setProperty("--end-y", `${endY - startY}px`);
  }, [selected]);

Basically I’m trying to move an image to the center of the screen, during the animation the image grows
and in the end of the animation, when it gets to the center I render a new component with the same image.

I’m using SVG as images

Is there a way I can make the growth during the animation exactly finished with the same size as the one in the new component in a smooth way (the transition between components).

the goal is doing something better than this:

@media only screen and (max-width: 320px) { 
  @keyframes moveToCenter {
    0% {
      transform: translate(0, 0) scale(1);
    }
    100% {
      transform: translate(var(--end-x), var(--end-y)) scale(2.1);
    }
  }
}
@media only screen and (max-width: 380px) { 
  @keyframes moveToCenter {
    0% {
      transform: translate(0, 0) scale(1);
    }
    100% {
      transform: translate(var(--end-x), var(--end-y)) scale(2.3);
    }
  }
}
@media only screen and (max-width: 420px) { 
  @keyframes moveToCenter {
    0% {
      transform: translate(0, 0) scale(1);
    }
    100% {
      transform: translate(var(--end-x), var(--end-y)) scale(2.5);
    }
  }
}
....
....
and so on...

Because each screen behaves differently on each change of height or width.

I tried making the transition in the same component, The main component is a selection of an image, where when selected it makes all other images disappear, so it behaves weird