Object position in javascript

This should work. Still playing around with JavaScript but tested in Storyline with modern browser, and the button stayed in the middle and worked as expected.

1. Reduce the range of movement for offsetX, offsetY, scaleX, scaleY, and rotation to make the shake effect even less intense.
2. Increase the timeout duration to further slow down the shake.

You can adjust the values as needed to achieve the desired shake intensity and speed. Feel free to experiment until you get the perfect shake effect.

----------------

var theObject5 = document.querySelectorAll("[data-acc-text='shake']");

// Store the initial position and transform of each element
theObject5.forEach(function (element) {
  element.dataset.initialX = element.offsetLeft;
  element.dataset.initialY = element.offsetTop;
  element.dataset.initialTransform = getComputedStyle(element).transform;
});

function Tween() {
  theObject5.forEach(function (element) {
    var initialTransform = element.dataset.initialTransform;
    var offsetX = R(-1, 1); // Adjust the range to reduce the shake intensity
    var offsetY = R(-1, 1); // Adjust the range to reduce the shake intensity
    var scaleX = R(0.99, 1.01); // Adjust the range to reduce the scale variation
    var scaleY = R(0.99, 1.01); // Adjust the range to reduce the scale variation
    var rotation = R(-1, 1); // Adjust the range to reduce the rotation angle

    element.style.transform =
      initialTransform +
      ` translate(${offsetX}px, ${offsetY}px) scale(${scaleX}, ${scaleY}) rotate(${rotation}deg)`;

    setTimeout(function () {
      element.style.transform = initialTransform;
    }, 750); // Adjust the duration of the shake (50% slower than previous)

  });
  requestAnimationFrame(Tween);
}

function R(max, min) {
  return Math.random() * (max - min) + min;
}

Tween();

Thank you Richard it was very helpful, i used it in my project.

Mahdi,

Glad to hear you got it working. You are welcome.

Richard