Using CSS Translate can cause discrepancies in the X and Y values retrieved from getBoundingClientRect

Question

Using CSS Translate can cause discrepancies in the X and Y values retrieved from getBoundingClientRect

In my React project, I am working on animating the transition from multiple images to one when a specific image is selected.

The CSS I am using for the animation is based on the x and y position of the original clicked image. Currently, these values are hardcoded. However, when I input them into the CSS 'translate' property, they seem to be inaccurate and I can't determine why.

I positioned a div absolutely with the same values, and that appears to be correct. But, the initial values for 'translate' in the CSS animation do not match what I input.

@keyframes move-image {
    from {
        transform: translate(383.125px, 7.998px) scale(1);
    }
}

.animation {
   animation: move-image 6.6s;
}

You can view the animation CSS in the CSS tab by following this link: https://codepen.io/nickjsdevelope1/pen/QoWEPV

css reactjs dom

Answer 1

Answer №1

When translating elements, it's important to consider the initial element position as an offset rather than a fixed destination. This concept also applies when positioning elements using top/left coordinates relative to the containing block if the element is absolute or fixed.

Although both translation and positioning involve an offset from an origin, the origins are not necessarily the same for each method.

To visualize this concept, let's look at two elements being translated with the same values:

.box {
  width:50px;
  height:50px;
  background:red;
  transform:translate(50px,50px);
}
.box1 {
  width:50px;
  height:50px;
  background:blue;
  transform:translate(50px,50px);
}

<div class="box">

</div>
<div class="box1">

</div>

Both elements in this example are offset by 50px on both the X and Y axis from their original positions.

If we use position with top/left coordinates, the elements will overlap because they share the same containing block and are offset by the same values from the same point:

.box {
  width:50px;
  height:50px;
  background:red;
  position:absolute;
  top:50px;
  left:50px;
}
.box1 {
  width:50px;
  height:50px;
  background:blue;
  position:absolute;
  top:50px;
  left:50px;
}

<div class="box">

</div>
<div class="box1">

</div>

Answer 2

When translating elements, it's important to consider the initial element position as an offset rather than a fixed destination. This concept also applies when positioning elements using top/left coordinates relative to the containing block if the element is absolute or fixed.

Although both translation and positioning involve an offset from an origin, the origins are not necessarily the same for each method.

To visualize this concept, let's look at two elements being translated with the same values:

.box {
  width:50px;
  height:50px;
  background:red;
  transform:translate(50px,50px);
}
.box1 {
  width:50px;
  height:50px;
  background:blue;
  transform:translate(50px,50px);
}

<div class="box">

</div>
<div class="box1">

</div>

Both elements in this example are offset by 50px on both the X and Y axis from their original positions.

If we use position with top/left coordinates, the elements will overlap because they share the same containing block and are offset by the same values from the same point:

.box {
  width:50px;
  height:50px;
  background:red;
  position:absolute;
  top:50px;
  left:50px;
}
.box1 {
  width:50px;
  height:50px;
  background:blue;
  position:absolute;
  top:50px;
  left:50px;
}

<div class="box">

</div>
<div class="box1">

</div>

Using CSS Translate can cause discrepancies in the X and Y values retrieved from getBoundingClientRect

Answer №1

Similar questions

The navigation bar fails to recognize its own open/closed status

Hide additional tabs on the page when the width of the tabs exceeds the page width

Svelte's feature prevents users from inputting on Mapbox

Benefits of leveraging UI component libraries such as Bootstrap-Vue and React-Bootstrap

Chart showing a Google Timeline: Allow for each bar to be colored differently when there are multiple bars on the same line

Unable to align only one link on the right as flex-end is not functioning correctly

React MUI5 component latency when changing disable prop conditionally

Error message: "Plugin not specified or declared in the webpack configuration file

Resolving CSS glitches that mysteriously vanish in Internet Explorer versions 8 and 9

A guide on integrating a timeline reference using the @prismicio/client library in your Next.js/React application

HTML TABS: Make the first TAB automatically selected

Is it possible to have the smaller column in a flex column layout display full-width when it is wrapped alongside a bigger column?

Leveraging interface property to determine the length of another property within the interface

Creating a script to open multiple URLs in HTML and JavaScript

Dealing with problem of highlighting links in Android WebView

Enabling a variable to encompass various types within ReactJS

Guide to inserting a glyphicon within a bootstrap badge

The Redux store has been modified, yet the changes are not reflected in the

Adjust the paragraph font size within the bootstrap stylesheet

Is it possible to automatically resize ImageList columns according to the size of the screen?