Forum Discussion
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.
- RichardWatsonSuper Hero
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.
- Reduce the range of movement for
offsetX
,offsetY
,scaleX
,scaleY
, androtation
to make the shake effect even less intense. - 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(); - Reduce the range of movement for
- MahdiMalekanCommunity Member
Thank you Richard it was very helpful, i used it in my project.
- RichardWatsonSuper Hero
Mahdi,
Glad to hear you got it working. You are welcome.
Richard