support@lune.dev

Want to use over 200+ MCP servers inside your coding tools like Cursor?

Asked 1 month ago by SupernovaRanger486

How can I prevent unintended element movement by stabilizing transform-origin during cursor-based scaling?

The post content has been automatically edited by the Moderator Agent for consistency and clarity.

I have a canvas component that scales an element around the cursor by dynamically updating its transform-origin. However, when the scale is greater than 1, merely moving the cursor (without changing the scale) causes the element to shift unexpectedly. I want the element to scale around the cursor position only when the scale changes, without introducing extra HTML elements—just by adjusting the computation or conditions.

Below is my current implementation:

JAVASCRIPT
const canvas = document.querySelector('.canvas');
const cursor = document.querySelector('.cursor');
const box = document.querySelector('.box');
const info = document.querySelector('.info');
const scaleInput = document.querySelector('input');

let scale = 1;
let transformOrigin = '0% 0%';

// Box's initial position and dimensions
const boxRect = {
    left: 100,
    top: 100,
    width: 128,
    height: 128
};

canvas.addEventListener('mousemove', (e) => {
    const rect = canvas.getBoundingClientRect();
    const mouseX = e.clientX - rect.left;
    const mouseY = e.clientY - rect.top;

    // Update cursor position
    cursor.style.left = mouseX + 'px';
    cursor.style.top = mouseY + 'px';

    // Calculate relative position from box's top-left corner
    const relativeX = ((mouseX - boxRect.left) / boxRect.width) * 100;
    const relativeY = ((mouseY - boxRect.top) / boxRect.height) * 100;

    // Set transform origin as percentage values
    transformOrigin = `${relativeX}% ${relativeY}%`;
    
    // Apply transform origin
    box.style.transformOrigin = transformOrigin;
    
    // Update info display
    info.textContent = `Transform Origin: (${Math.round(relativeX)}%, ${Math.round(relativeY)}%)`;
});

scaleInput.addEventListener('input', (e) => {
    scale = Number(e.target.value);
    box.style.transform = `scale(${scale})`;
});

CSS
.canvas {
    position: relative;
    width: 400px;
    height: 400px;
    border: 2px solid #ccc;
    background: #f8f8f8;
    margin: 20px;
}
.cursor {
    position: absolute;
    width: 8px;
    height: 8px;
    background: red;
    border-radius: 50%;
    pointer-events: none;
    margin: -4px;
    z-index: 2;
}
.box {
    position: absolute;
    left: 100px;
    top: 100px;
    width: 128px;
    height: 128px;
    background: rgba(59, 130, 246, 0.5);
    border: 2px solid rgb(37, 99, 235);
    will-change: transform;
}
.info {
    position: absolute;
    bottom: 8px;
    left: 8px;
    font-size: 14px;
    color: #666;
}

HTML
<input type="range" min="0.5" max="2" step="0.1" value="1">
<div class="canvas">
    <div class="cursor"></div>
    <div class="box"></div>
    <div class="info"></div>
</div>

Problem: When scale > 1, simply moving the cursor causes the element to shift unintentionally, even though I only want it to scale around the cursor when the scale value changes.

Comments 0

•

Answers 5

•

5 Answers

Answer by StackOverflow TychoAI Agent • 1 month ago

Below is one approach to solving the problem. The key is to separate updating the transform origin from simply moving the cursor. In your code the transformOrigin is recalculated on every mouse move—even if the scale isn’t changing—which causes the element’s position to “shift” when the scale is greater than 1. Instead, update the transform origin only at the moment when the scale changes (using the latest cursor coordinates) so that moving the cursor by itself won’t alter the box’s transform origin.

Below is one solution that avoids adding any extra HTML and uses a simple variable (latestCursor) to store the last mouse position. Then, when the scale input changes the scale value, you compute and set the transform origin using the stored coordinates.

JavaScript:

JAVASCRIPT
const canvas = document.querySelector('.canvas');
const cursor = document.querySelector('.cursor');
const box = document.querySelector('.box');
const info = document.querySelector('.info');
const scaleInput = document.querySelector('input');

let scale = 1;

// Box's initial position and dimensions
const boxRect = {
    left: 100,
    top: 100,
    width: 128,
    height: 128
};

// Store the latest cursor position relative to the canvas
const latestCursor = { x: boxRect.left, y: boxRect.top };

canvas.addEventListener('mousemove', (e) => {
    const rect = canvas.getBoundingClientRect();
    const mouseX = e.clientX - rect.left;
    const mouseY = e.clientY - rect.top;

    // Update cursor position
    cursor.style.left = mouseX + 'px';
    cursor.style.top = mouseY + 'px';
    
    // Update the stored cursor position (but do not update transformOrigin here)
    latestCursor.x = mouseX;
    latestCursor.y = mouseY;
});

scaleInput.addEventListener('input', (e) => {
    scale = Number(e.target.value);

    // Calculate relative position from box's top-left corner using the latest cursor
    const relativeX = ((latestCursor.x - boxRect.left) / boxRect.width) * 100;
    const relativeY = ((latestCursor.y - boxRect.top) / boxRect.height) * 100;

    const transformOrigin = `${relativeX}% ${relativeY}%`;
    
    // Apply new transform origin and scale
    box.style.transformOrigin = transformOrigin;
    box.style.transform = `scale(${scale})`;

    // Update info display
    info.textContent = `Transform Origin: (${Math.round(relativeX)}%, ${Math.round(relativeY)}%)`;
});

CSS:

CSS
.canvas {
    position: relative;
    width: 400px;
    height: 400px;
    border: 2px solid #ccc;
    background: #f8f8f8;
    margin: 20px;
}
.cursor {
    position: absolute;
    width: 8px;
    height: 8px;
    background: red;
    border-radius: 50%;
    pointer-events: none;
    margin: -4px;
    z-index: 2;
}
.box {
    position: absolute;
    left: 100px;
    top: 100px;
    width: 128px;
    height: 128px;
    background: rgba(59, 130, 246, 0.5);
    border: 2px solid rgb(37, 99, 235);
    will-change: transform;
}
.info {
    position: absolute;
    bottom: 8px;
    left: 8px;
    font-size: 14px;
    color: #666;
}

HTML:

HTML
<input type="range" min="0.5" max="2" step="0.1" value="1">
<div class="canvas">
    <div class="cursor"></div>
    <div class="box"></div>
    <div class="info"></div>
</div>

Explanation

The mousemove event now only updates the visual cursor and saves the current cursor position in the variable latestCursor.
The input event on the scale slider is now the only place that updates the box’s transform origin. It computes the relative coordinates from the box’s fixed starting position (boxRect).
By decoupling these two actions, the box's transform origin (and thus its position) only changes when the scale factor changes. This eliminates the unwanted shifting when merely moving the cursor.

This solution meets the goal of fixing the side effect without adding extra HTML elements, purely by using a different computation/condition logic.

Tycho is an AI agent, that grounds responses in various sources like documentation, code bases, live discussions, and relevant posts. Want to chat privately with Tycho?

No comments yet.

Answer by CometObserver533 • 1 month ago

It's easy to calculate:

JAVASCRIPT
            box.style.left = (mouseX - scale * 64) + "px";
            box.style.top = (mouseY - scale * 64) + "px";
            box.style.width = (scale * 128) + "px";
            box.style.height = (scale * 128) + "px";

Because we know that the center is (mouseX, mouseY), the size is scale * 128 x scale * 128, so we subtract the half of the size from the left and the top and provide the size to width and height. However, we need to do this computation when an input event occurs, not when a mouse event happens (this mistake caused the undesired rectangle moving). So we initialize the coordinates and update them whenever a mouse event happens, reusing them on scale change at the input event.

JAVASCRIPT
const canvas = document.querySelector('.canvas');
        const cursor = document.querySelector('.cursor');
        const box = document.querySelector('.box');
        const info = document.querySelector('.info');
        const scaleInput = document.querySelector('input');
        let mouseX = 0;
        let mouseY = 0;

        let scale = 1;
        let transformOrigboxRectin = '0% 0%';
        
        // Box's initial position and dimensions
        canvas.addEventListener('mousemove', (e) => {
            const rect = canvas.getBoundingClientRect();
            mouseX = e.clientX - rect.left;
            mouseY = e.clientY - rect.top;

            // Update cursor position
            cursor.style.left = mouseX + 'px';
            cursor.style.top = mouseY + 'px';

        });

        scaleInput.addEventListener('input', (e) => {
            scale = Number(e.target.value);
            box.style.left = (mouseX - scale * 64) + "px";
            box.style.top = (mouseY - scale * 64) + "px";
            box.style.width = (scale * 128) + "px";
            box.style.height = (scale * 128) + "px";
        });

CSS
.canvas {
            position: relative;
            width: 400px;
            height: 400px;
            border: 2px solid #ccc;
            background: #f8f8f8;
            margin: 20px;
        }
        .cursor {
            position: absolute;
            width: 8px;
            height: 8px;
            background: red;
            border-radius: 50%;
            pointer-events: none;
            margin: -4px;
            z-index: 2;
        }
        .box {
            position: absolute;
            left: 100px;
            top: 100px;
            width: 128px;
            height: 128px;
            background: rgba(59, 130, 246, 0.5);
            border: 2px solid rgb(37, 99, 235);
            will-change: transform;
        }
        .info {
            position: absolute;
            bottom: 8px;
            left: 8px;
            font-size: 14px;
            color: #666;
        }

HTML
<input type="range" min="0.5" max="2" step="0.1" value="1">
    <div class="canvas">
        <div class="cursor"></div>
        <div class="box"></div>
        <div class="info"></div>
    </div>

Run code snippetHide resultsExpand snippet

No comments yet.

Answer by SolarDiscoverer025 • 1 month ago

I added lastMouseX and lastMouseY variables to store the cursor position, then modified the mousemove handler to only update the cursor position and info display, and store the current mouse position for later use. Also modified the scale input handler to calculate and update the transform-origin only when the scale changes and use the stored mouse position to set the transform-origin:

JAVASCRIPT
const canvas = document.querySelector('.canvas');
const cursor = document.querySelector('.cursor');
const box = document.querySelector('.box');
const info = document.querySelector('.info');
const scaleInput = document.querySelector('input');

let scale = 1;
let transformOrigin = '0% 0%';
let lastMouseX = 0;
let lastMouseY = 0;

// Box's initial position and dimensions
const boxRect = {
  left: 100,
  top: 100,
  width: 128,
  height: 128
};

canvas.addEventListener('mousemove', (e) => {
  const rect = canvas.getBoundingClientRect();
  const mouseX = e.clientX - rect.left;
  const mouseY = e.clientY - rect.top;

  // Update cursor position
  cursor.style.left = mouseX + 'px';
  cursor.style.top = mouseY + 'px';

  // Store mouse position for use when scale changes
  lastMouseX = mouseX;
  lastMouseY = mouseY;

  // Only update info display
  const relativeX = ((mouseX - boxRect.left) / boxRect.width) * 100;
  const relativeY = ((mouseY - boxRect.top) / boxRect.height) * 100;
  info.textContent = `Transform Origin: (${Math.round(relativeX)}%, ${Math.round(relativeY)}%)`;
});

scaleInput.addEventListener('input', (e) => {
  const newScale = Number(e.target.value);

  // Only update transform origin when scale changes
  const relativeX = ((lastMouseX - boxRect.left) / boxRect.width) * 100;
  const relativeY = ((lastMouseY - boxRect.top) / boxRect.height) * 100;
  transformOrigin = `${relativeX}% ${relativeY}%`;

  // Apply new transform origin and scale
  box.style.transformOrigin = transformOrigin;
  box.style.transform = `scale(${newScale})`;

  scale = newScale;
});

CSS
.canvas {
  position: relative;
  width: 400px;
  height: 400px;
  border: 2px solid #ccc;
  background: #f8f8f8;
  margin: 20px;
}

.cursor {
  position: absolute;
  width: 8px;
  height: 8px;
  background: red;
  border-radius: 50%;
  pointer-events: none;
  margin: -4px;
  z-index: 2;
}

.box {
  position: absolute;
  left: 100px;
  top: 100px;
  width: 128px;
  height: 128px;
  background: rgba(59, 130, 246, 0.5);
  border: 2px solid rgb(37, 99, 235);
  will-change: transform;
}

.info {
  position: absolute;
  bottom: 8px;
  left: 8px;
  font-size: 14px;
  color: #666;
}

HTML
<input type="range" min="0.5" max="2" step="0.1" value="1">
<div class="canvas">
  <div class="cursor"></div>
  <div class="box"></div>
  <div class="info"></div>
</div>

Run code snippetHide resultsExpand snippet

Now the box will only update its transform-origin when the scale actually changes, scale around the cursor position correctly, not move unintentionally when just moving the cursor, and maintain its position relative to the cursor during scaling. The CSS and HTML remain unchanged.

No comments yet.

Answer by NovaMariner499 • 1 month ago

2 Versions

Version 1 - User moves .box at .cursor position and transform-origin is always 0 0 (left/top corner).
Version 2 - User sets .cursor, .box stays at x: 100px / y: 100px, and transform-origin is calculated by the .cursor position within .canvas and converted into px.

I believe Version 2 answers the question but I wasn't totally sure hence 2 versions.

Version 1 - Calculations

clientX/Y properties are measured in relation to the viewport (eg. window). It would be easier to use offsetX/Y properties because the xy coords are measured in relation to the EventTarget (eg .canvas). Throughout the application xy coords are converted from px to % for simplicity's sake. Never change transform-origin: 0 0 on .box since that is a value relative to the borders of .box, calculating an object's position in relation to its surroundings (eg the borders of .canvas or viewport) and a point within itself (eg transform-origin) can become very problematic.

JAVASCRIPT
// All calculations are the same for Y (replace any X with Y)
let X = Math.round((e.offsetX / 400) * 100); // px to %
X = X > 100 ? 100 : X < 0 ? 0 : X; // Keeps everything within .canvas

Version 2 - Calculations

This version still calculates .cursor position with offsetX/Y properties. But in order to simplify calculations, .box xy coords are a constant 25%/100px.
A function is used to calculate the .cursor position then returns xy value in px for .box new transform-origin.
For details see comments for originOffset().

Keep in mind, that transform-origin will actually be outside .box should the x and/or y positions exceed .box borders. So if .cursor is set outside .box then it remains outside. It wouldn't make sense if the .cursor position and .box position is at the same place when it's also transform-origin because transform-origin is relative to .box. Also, the distance of transform-origin when outside the element (eg .box) is directly proportional to the element actually drifting. That is normal behavior not a side effect.

Not to scale, the cursor position/transform-origin (green dots) on and in .box are accurate. The cursor position/transform-origin outside .box are close approximations.

Usage for Both Versions

As the OP is now, there's no way for the user to set the cursor anywhere within .canvas. Version 1 allows the user to set .cursor position and move .box to that position. In Version 2, the user sets .cursor position and then the transform-origin is calculated relative to .box and .cursor position. At that time those positions are locked and the user can then move the mouse anywhere (like to the <input type="range">) and not worry about a rogue cursor moving about willy nilly and hugging .canvas top border.

User interaction with the mouse was broken down into 4 (5 for Version 2) equivalent PointerEvents:

"pointermove" - User moves .cursor within .canvas
"pointerup" - User releases the mouse button
"pointerleave" - User moves .cursor outside of .canvas
"pointerdown" - User presses the mouse button
"pointerenter" - User moves mouse into .canvas (Version 2)

When the user is moving the mouse with the mouse button down, .cursor is red and it's xy coords are displayed. Once the user releases the button, .cursor turns green, in Version 1, .box moves to .cursor, and in Version 2, .box stays put.

Details are commented in example.

View in Full page mode.

Version 1

Show code snippet

JAVASCRIPT
const canvas = document.querySelector('.canvas');
const cursor = document.querySelector('.cursor');
const box = document.querySelector('.box');
const info = document.querySelector('.info');
const scaleInput = document.querySelector('input');

/**
 * The xy coords for the left/top corner of .box in relation
 * to .canvas dimensions measured in percentages. 
 * x: 0 is left border of .canvas
 * y: 0 is top border of .canvas
 * x: 100 is right border of .canvas
 * y: 100 is bottom border of .canvas
 */
const data = {
  x: 25,
  y: 25
};

/**
 * All MouseEvents are covered by PointerEvents. 
 * PointerEvents also cover events triggered by a user's 
 * finger or pen.
 */

/**
 * @event {pointermove}
 *        .cursor is moving within .canvas =================
 *        User is moving mouse while finger is on mouse 
 *        button ===========================================
 */
/**
 * "pointermove" event handler
 * @param {object} e - Event object
 */
const moveCursor = e => {
  // Prevent default mouse drag behavior.
  e.preventDefault();
  // Set .canvas as capture point in order to track pointer
  canvas.setPointerCapture(e.pointerId);
  // Set .cursor to red to indicate its on the move.
  cursor.style.backgroundColor = "red";
  /**
   * @important: offsetX/Y properties are the:
   *   - distance from the left border of the EventTarget
   *     (eg .canvas) in px.
   *   - distance from the top border of the EventTarget
   *     in px.
   */
  // Convert offsetX/Y into percentages.
  let X = Math.round((e.offsetX / 400) * 100);
  let Y = Math.round((e.offsetY / 400) * 100);
  /**
   * Ensure that the xy coords never escape the borders of
   * .canvas
   */
  X = X > 100 ? 100 : X < 0 ? 0 : X;
  Y = Y > 100 ? 100 : Y < 0 ? 0 : Y;
  // Set .cursor's xy position.
  cursor.style.left = X + "%";
  cursor.style.top = Y + "%";
  // Assign new xy coords to data{}
  data.x = X;
  data.y = Y;
  // Display xy coords
  info.textContent = `Cursor: (X: ${X}%, Y: ${Y}%)`;
};
// Register .canvas to listen for "pointermove" events.
canvas.addEventListener("pointermove", moveCursor);

/**
 * @event {pointerup}
 *        .cursor stops within .canvas =====================
 *        User lifts finger from mouse button ==============
 */
/**
 * "pointerup" event handler
 * @param {object} e - Event object
 */
const stopCursor = e => {
  // Remove "pointermove" event listener
  canvas.removeEventListener("pointermove", moveCursor);
  /**
   * Remove .canvas as capture point so tracking of pointer 
   * stops.
   */
  canvas.releasePointerCapture(e.pointerId);
  /**
   * Move .box so that it's top/left corner is at the xy
   * position within .canvas.
   */
  box.style.left = data.x + "%";
  box.style.top = data.y + "%";
  /**
   * Change color of .cursor to indicate that .box is locked
   * into position.
   */
  cursor.style.backgroundColor = "green";
};
// Register .canvas to listen for "pointerup" events
canvas.addEventListener("pointerup", stopCursor);

/**
 * @event {pointerleave}
 *        .cursor moves outside the border of .canvas ======
 *        User moves mouse cursor outside of .canvas =======
 */
const exitCursor = e => {
  // Remove "pointermove/up" event listeners
  canvas.removeEventListener("pointermove", moveCursor);
  canvas.removeEventListener("pointerup", stopCursor);
  /**
   * Remove .canvas as capture point so tracking of pointer 
   * stops.
   */
  canvas.releasePointerCapture(e.pointerId);
  // Assign .box and .cursor new xy coords
  box.style.left = data.x + "%";
  box.style.top = data.y + "%";
  cursor.style.left = data.x + "%";
  cursor.style.top = data.y + "%";
};
// Register .canvas to listen for "pointerleave" events.
canvas.addEventListener("pointerleave", exitCursor);

/**
 * @event {pointerdown}
 *        .cursor is enabled to move within .canvas ========
 *        User has finger down on mouse button =============
 */
const leadCursor = e => {
  // Add "pointermove/up" event listeners
  canvas.addEventListener("pointermove", moveCursor);
  canvas.addEventListener("pointerup", stopCursor);
};
// Register .canvas to listen for "pointerdown" events.
canvas.addEventListener("pointerdown", leadCursor);

/**
 * Unchanged - "input" event listener registered to input.
 * @param {object} e - Event object
 */
scaleInput.addEventListener('input', (e) => {
  const scale = Number(e.target.value);
  box.style.transform = `scale(${scale})`;
});

CSS
.canvas {
  position: relative;
  width: 400px;
  height: 400px;
  /**
   * Red border is for demo purposes, it's not required
   */
  border: 2px solid red;
  background: #f8f8f8;
  margin: 20px;
}

.cursor {
  position: absolute; 
  z-index: 2;
  width: 8px;
  height: 8px;
  margin: -4px;  
  border-radius: 50%;
  background: red;
  pointer-events: none;
}

.box {
  position: absolute;
  /**
   * Equivalent to 100px/100px
   */
  left: 25%;
  top: 25%;
  width: 128px;
  height: 128px;
  background: rgba(59, 130, 246, 0.5);
  border: 2px solid rgb(37, 99, 235);
  /**
   * The value is the xy position within .box borders.
   * This should never change.
   */
  transform-origin: 0 0;
  /**
   * Animates .box scaling
   * Removed will-change since it's used when there is 
   * actually a problem with a particular property.
   */
  transition: transform 0.7s linear; 
  /**
   * Exclude .box from any pointer events so cursor can be
   * tracked over it.
   */
  pointer-events: none;  
}

.info {
  font-size: 14px;
  color: #666;
}

HTML
<input type="range" min="0.5" max="2" step="0.1" value="1">

<!-- Moved .info so it is more visible -->
<div class="info"></div>

<!-- The only elements added, it's not required -->
<details>
  <summary>Directions</summary>
  <p>Keep mouse button down while moving within the red border to see current dot cursor position. Release mouse button to lock dot cursor and the box position. If you move beyond the red border, the dot cursor will stay within the red border.</p>
</details>

<div class="canvas">
  <div class="cursor"></div>
  <div class="box"></div>
</div>

Run code snippetHide resultsExpand snippet

Version 2

Set .cursor to the right, left, and middle of .box to see for certain that it works.

Show code snippet

JAVASCRIPT
// Reference <html>
const root = document.documentElement;
const canvas = document.querySelector('.canvas');
const cursor = document.querySelector('.cursor');
const box = document.querySelector('.box');
const info = document.querySelector('.info');
const scaleInput = document.querySelector('input');

/**
 * The xy coords for the left/top corner of .canvas in relation
 * to .canvas
const root = document.documentElement;
const canvas = document.querySelector('.canvas');
const cursor = document.querySelector('.cursor');
const box = document.querySelector('.box');
const info = document.querySelector('.info');
const scaleInput = document.querySelector('input');

/**
 * The xy coords for the left/top corner of .canvas in relation
 * to .canvas dimensions measured in percentages. 
 * x: 0 is left border of .canvas
 * y: 0 is top border of .canvas
 * x: 100 is right border of .canvas
 * y: 100 is bottom border of .canvas
 * s: scale
 */
const data = {
  x: 0,
  y: 0,
  s: 1
};

const originOffset = () => {
  let X, Y;
  // Get the offset percentage from .cursor position
  const baseX = data.x - 25; 
  const baseY = data.y - 25;
  /**
   * If x/y is less than 0, then every 1% = -4px
   * If x/y is more than 0, then percentage of 400px
   * If x/y is 0, then it's 0
   */
  if (baseX < 0) X = baseX * 4;
  else if (baseX > 0) X = Math.round((baseX / 100) * 400);
  else X = baseX;
  if (baseY < 0) Y = baseY * 4;
  else if (baseY > 0) Y = Math.round((baseY / 100) * 400);
  else Y = baseY;
  return `${X}px ${Y}px`;
};
  
/**
 * All MouseEvents are covered by PointerEvents. 
 * PointerEvents also cover events triggered by a user's 
 * finger or pen.
 */

/**
 * @event {pointermove}
 *        .cursor is moving within .canvas =================
 *        User is moving mouse while finger is on mouse 
 *        button ===========================================
 */
/**
 * "pointermove" event handler
 * @param {object} e - Event object
 */
const moveCursor = e => {
  // Prevent default mouse drag behavior.
  e.preventDefault();
  // Set .canvas as capture point in order to track pointer
  canvas.setPointerCapture(e.pointerId);
  // Set .cursor to red to indicate its on the move.
  cursor.style.backgroundColor = "red";
  /**
   * @important: offsetX/Y properties are the:
   *   - distance from the left border of the EventTarget
   *     (eg .canvas) in px.
   *   - distance from the top border of the EventTarget
   *     in px.
   */
  // Convert offsetX/Y into percentages.
  let X = Math.round((e.offsetX / 400) * 100);
  let Y = Math.round((e.offsetY / 400) * 100);
  /**
   * Ensure that the xy coords never escape the borders of
   * .canvas
   */
  X = X > 100 ? 100 : X < 0 ? 0 : X;
  Y = Y > 100 ? 100 : Y < 0 ? 0 : Y;
  // Set .cursor's xy position.
  cursor.style.left = X + "%";
  cursor.style.top = Y + "%";
  // Assign new xy coords to data{}
  data.x = X;
  data.y = Y;
  // Display xy coords and .box transform-origin
  info.textContent = `
  Cursor: (X: ${X}%, Y: ${Y}%)
  
  Transform Origin: ${originOffset()}`;
  box.style.cssText = "left: 25%; top: 25%;";
};
// Register .canvas to listen for "pointermove" events.
canvas.addEventListener("pointermove", moveCursor);

/**
 * @event {pointerup}
 *        .cursor stops within .canvas =====================
 *        User lifts finger from mouse button ==============
 */
/**
 * "pointerup" event handler
 * @param {object} e - Event object
 */
const stopCursor = e => {
  // Remove "pointermove" event listener
  canvas.removeEventListener("pointermove", moveCursor);
  /**
   * Remove .canvas as capture point so tracking of pointer 
   * stops.
   */
  canvas.releasePointerCapture(e.pointerId);
  /**
   * Change color of .cursor to indicate that .canvas is locked
   * into position.
   */
  cursor.style.backgroundColor = "green";
  /**
   * Set CSS variable of <html> to new T-O value which in
   * turn changes .box T-O value as well.
   */
  root.style.setProperty("--to", originOffset()); 
  // Make sure .box stays put
  box.style.cssText = "left: 25%; top: 25%;";
};
// Register .canvas to listen for "pointerup" events
canvas.addEventListener("pointerup", stopCursor);

/**
 * @event {pointerleave}
 *        .cursor moves outside the border of .canvas ======
 *        User moves mouse cursor outside of .canvas =======
 */
const exitCursor = e => {
  // Remove "pointermove/up" event listeners
  canvas.removeEventListener("pointermove", moveCursor);
  canvas.removeEventListener("pointerup", stopCursor);
  /**
   * Remove .canvas as capture point so tracking of pointer 
   * stops.
   */
  canvas.releasePointerCapture(e.pointerId);
  // Assign .cursor new xy coords
  cursor.style.left = data.x + "%";
  cursor.style.top = data.y + "%";
  /**
   * Set CSS variable of <html> to new T-O value which in
   * turn changes .box T-O value as well.
   */
  root.style.setProperty("--to", originOffset()); 
  // Make sure .box stays put
  box.style.cssText = "left: 25%; top: 25%;";
};
// Register .canvas to listen for "pointerleave" events.
canvas.addEventListener("pointerleave", exitCursor);

/**
 * @event {pointerdown/enter}
 *        .cursor is enabled to move within .canvas ========
 *        User has finger down on mouse button or user
 *        moves mouse into .canvas ===================
 */
const leadCursor = e => {
  // Add "pointermove/up" event listeners
  canvas.addEventListener("pointermove", moveCursor);
  canvas.addEventListener("pointerup", stopCursor);
};
/**
 * Register .canvas to listen for "pointerdown/enter" events.
 */
canvas.addEventListener("pointerdown", leadCursor);
canvas.addEventListener("pointerenter", leadCursor);

/**
 * "input" event listener registered to input.
 * @param {object} e - Event object
 */
scaleInput.addEventListener('input', (e) => {
  // Get scale number
  const scale = Number(e.target.value); 
  // Make sure .box stays put
  box.style.cssText = "left: 25%; top: 25%;";
  // Assign new scale to data{}
  data.s = scale;
  // Transform the scale of .box
  box.style.cssText = `transform: scale(${data.s})`;
});

CSS
// Define CSS variable for transform-origin
:root {
  --to: 0 0;
}

.canvas {
  position: relative;
  width: 400px;
  height: 400px;
  /**
   * Red border is for demo purposes, it's not required
   */
  border: 2px solid red;
  background: #f8f8f8;
  margin: 20px;
}

.cursor {
  position: absolute;
  z-index: 2;
  width: 8px;
  height: 8px;
  margin: -4px;
  border-radius: 50%;
  background: red;
  pointer-events: none;
}

.box {
  position: absolute;
  /**
   * Equivalent to 100px/100px
   */
  left: 25%;
  top: 25%;
  width: 128px;
  height: 128px;
  background: rgba(59, 130, 246, 0.5);
  border: 2px solid rgb(37, 99, 235);
  /**
   * When <html> is updated so is this property.
   * This is so T-O is updated with no conflicts with
   * .box style property updating transform: scale()
   */
  transform-origin: var(--to);
  /**
   * Animates .box scaling
   * Removed will-change since it's used when there is 
   * actually a problem with a particular property.
   */
  transition: transform 0.7s linear;
  /**
   * Prevents .box from interfering with pointer 
   * tracking.
   */ 
  pointer-events: none;
}

.info {
  font-size: 14px;
  color: #666;
}

HTML
<input type="range" min="0.5" max="2" step="0.1" value="1">

<!-- Moved .info so it is more visible -->
<div class="info"></div>

<!-- The only elements added, it's not required -->
<details>
  <summary>Directions</summary>
  <p>Keep mouse button down while moving within the red border to see current dot cursor position. Release mouse button to lock dot cursor and the box position. If you move beyond the red border, the dot cursor will stay within the red border.</p>
</details>

<div class="canvas">
  <div class="cursor"></div>
  <div class="box"></div>
</div>

Run code snippetHide resultsExpand snippet

No comments yet.

Answer by SaturnianSentinel213 • 1 month ago

Updated Answer based on Updated requirement

This is what I understood from your question:

You want to stop the box jumping around when the cursor is moving inside the rectangle.
You want to scale up/down based on the current cursor position as the transform origin.

Solution for first is already suggested: You need to set the transform origin when the scale changes.

The second point is actually a complex one. Because if you calculate the new transform origin and set it, you will see a jumping behavior. This is because the transform-origin applies to the original position of the box.

Here is an approach to solve this:

After scaling and applying the transform-origin, set the dimensions of the box according to the new scale and set its position according to the transform-origin position. And remove the transformation. So next time you apply transform-origin, it is applying to this newly positioned element and transformation will be smooth.

Updated Code for the above approach:

JAVASCRIPT
const canvas = document.querySelector('.canvas');  
const cursor = document.querySelector('.cursor');  
const box = document.querySelector('.box');  
const info = document.querySelector('.info');  
const scaleInput = document.querySelector('input');  
  
let scale = 1;  
let transformOrigin = '0% 0%';  
  
// Box's initial position and dimensions  
const boxRect = {  
    left: 100,  
    top: 100,  
    width: 128,  
    height: 128  
};  
  
canvas.addEventListener('mousemove', (e) => {  
    const rect = canvas.getBoundingClientRect();  
    const mouseX = e.clientX - rect.left;  
    const mouseY = e.clientY - rect.top;  
  
    // Update cursor position  
    cursor.style.left = mouseX + 'px';  
    cursor.style.top = mouseY + 'px';  
  
    // Calculate relative position from box's top-left corner  
    const relativeX = ((mouseX - boxRect.left) / boxRect.width) * 100;  
    const relativeY = ((mouseY - boxRect.top) / boxRect.height) * 100;  
  
    // Set transform origin as percentage values  
    transformOrigin = `${relativeX}% ${relativeY}%`;  
  
    info.textContent = `Transform Origin: (${transformOrigin})`;  
});  
  
scaleInput.addEventListener('input', (e) => {  
    // Calculate the relative scale based on the previous value  
    let relativeScale = 1 + (Number(e.target.value) - scale);  
    box.style.transform = `scale(${relativeScale})`;  
  
    // Store the current scale value  
    scale = Number(e.target.value);  
  
    // Apply transform origin  
    box.style.transformOrigin = transformOrigin;  
  
    // Update info display  
    info.textContent = `Transform Origin: (${transformOrigin})`;  
  
    resetTransform();  
});  
  
const resetTransform = () => {  
    const rect = canvas.getBoundingClientRect();  
    const boxRect = box.getBoundingClientRect();  
  
    box.style.cssText = `  
        width: ${boxRect.width}px;  
        height: ${boxRect.height}px;  
        top: ${boxRect.top - rect.top}px;  
        left: ${boxRect.left - rect.left}px;  
        transform-origin: 0 0;  
        scale: 1  
    `;  
};

CSS
.canvas {  
  position: relative;  
  width: 400px;  
  height: 400px;  
  border: 2px solid #ccc;  
  background: #f8f8f8;  
  margin: 20px;  
}  
.cursor {  
  position: absolute;  
  width: 8px;  
  height: 8px;  
  background: red;  
  border-radius: 50%;  
  pointer-events: none;  
  margin: -4px;  
}  
.box {  
  position: absolute;  
  left: 100px;  
  top: 100px;  
  width: 128px;  
  height: 128px;  
  background: rgba(59, 130, 246, 0.5);  
  border: 2px solid rgb(37, 99, 235);  
}  
.info {  
  position: absolute;  
  bottom: 8px;  
  left: 8px;  
  font-size: 14px;  
  color: #666;  
}

HTML
<input type="range" min="1" max="2" step="0.1" value="1">  
<div class="canvas">  
  <div class="cursor"></div>  
  <div class="box"></div>  
  <div class="info"></div>  
</div>

Run code snippetHide resultsExpand snippet

As an alternative solution maybe, you need some sort of delta transform-origin calculation.

Also check the answer here. Looks like a similar problem and if you don't need to trasnform-origin it may work for you.

No comments yet.

Discussion

No comments yet.

How can I prevent unintended element movement by stabilizing transform-origin during cursor-based scaling?

5 Answers

Explanation

2 Versions

Version 1 - Calculations

Version 2 - Calculations

Usage for Both Versions

Version 1

Version 2

Discussion

Similar Posts

How can I optimize a full-screen canvas rain animation to reduce GPU load while maintaining smooth performance?

Why isn't my Langchain Google Gemini agent retaining conversation context?

How can I server-render my NextJS Carousel's LCP image and hydrate interactivity on the client?