Forum Discussion

MahdiMalekan's avatar
MahdiMalekan
Community Member
2 years ago

Object position in javascript

Hello to all colleagues, I have a problem in using a JavaScript code that I hope those who are familiar with this language will answer.
The following code is used to animate an object:

 

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

function Tween(){
var T = gsap.to(theObject5 ,0.15,{x:R(-10,10),y:R(-10,10),scale:R(1.1,0.9),rotation:R(-10,10),ease:Sine.easeInOut,onComplete:Tween})
};

Tween();

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

 

or ===>

 

gsap.to(theObject5, 0.1, {x:"+=20", yoyo:true, repeat:5});

 

The code works correctly and animates the shape, but the problem is that it moves the object to the upper left corner, while I want the object to stay in place and shake.
I am sending the project in the attachment.

  • 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();

    • RichardWatson's avatar
      RichardWatson
      Super Hero

      Mahdi,

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

      Richard