Can animation only be applied to 'absolute' positioned elements?

Question

I am trying to animate an object using DOM and struggling to animate the element when its CSS property position is not set to "absolute". Here is my code below:

I create a circle HTML element and try to move it in 45 degrees. Is there any way to animate an HTML element object that is not positioned absolute?

 x = 10;
    
function on_click() {

    var myCurvyMovement = document.getElementById("circle");
    myCurvyMovement.style.left = 0.5 * x;
    myCurvyMovement.style.top = 1 + x

    x += 10;

}

 #circle {
    position: absolute;
    width: 100px;
    height: 100px;
    background: red;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

/* Cleaner, but slightly less support: use "50%" as value */
#divBox {
    position: static
}

<body>
    <button style="display:block" onclick="on_click()">Move the box</button>
    <div id="circle">
    </div>
</body>

you can position it as fixed – vikrant Mar 05 '19 at 05:55 — vikrant, Mar 05 '19 at 05:55

TheDev · Answer 1 · 2019-03-05T06:01:10.483

2

You forgot to concatenate the "px" to set the x and y positions

 x = 10;
    
function on_click() {

    var myCurvyMovement = document.getElementById("circle");
    myCurvyMovement.style.left = 0.5 * x + 'px';
    myCurvyMovement.style.top = 1 + x + 'px';

    x += 10;

}

 #circle {
    position: absolute;
    width: 100px;
    height: 100px;
    background: red;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

/* Cleaner, but slightly less support: use "50%" as value */
#divBox {
    position: static
}

<body>
    <button style="display:block" onclick="on_click()">Move the box</button>
    <div id="circle">
    </div>
</body>

when not's absolute you need change the margin-left and margin-top property, in javascript is like this myCurvyMovement.style.marginLeft = 1 + x + 'px'

myCurvyMovement.style.marginTop = 1 + x + 'px'

(top/bottom and left/rigth)

edited Mar 05 '19 at 06:01

answered Mar 05 '19 at 05:45

TheDev

407
2
12

Thanks, but I'm asking if it's possible to animate when css property is not set to absolute – muhammad tayyab Mar 05 '19 at 05:48
Oh yes, when not's absolute you need change the `margin-left` and `margin-top` property, in javascript is like this `myCurvyMovement.style.marginLeft = 1 + x + 'px` `myCurvyMovement.style.marginTop = 1 + x + 'px` (top/bottom and left/rigth) – TheDev Mar 05 '19 at 05:51
1

@TheDev that will effect the relative elements around the animated element, if the animated element is also relative. – vikrant Mar 05 '19 at 05:54
@vikrant Yes, but it's possible thank you for the edit brother! – TheDev Mar 05 '19 at 05:57

score 2 · Accepted Answer · answered Mar 05 '19 at 08:14

2

I wouldn't consider left/right in order to do animation. As you have noticed, it won't work in all the cases as it need positionned elements. Even when using positionned element you won't have the same behavior between relative, absolute and fixed because each one will have its own reference for top/left.

For such case better consider transform that you can apply to any element (shouldn't be an inline element) and the reference of the movement will be the same for all. You will also have better performance.

x = 10;
    
function on_click() {

    var myCurvyMovement = document.getElementById("circle");
    myCurvyMovement.style.transform = "translate(" + (0.5 * x)+"px,"+(1 + x)+"px)";
    x += 10;

}

#circle {
    width: 100px;
    height: 100px;
    background: red;
    border-radius: 50px;
    transition:0.5s all; /*to have a smooth movement*/
}

<body>
    <button style="display:block" onclick="on_click()">Move the box</button>
    <div id="circle">
    </div>
</body>

answered Mar 05 '19 at 08:14

Temani Afif

245,468
26
309
415

Your answer seems good but eventually when I did a periodic animation setInterval(on_click, 20); it halts animation after first iteration. Don't know why – muhammad tayyab Mar 05 '19 at 08:44
@muhammadtayyab you are not changing the variable of transform .. you need to store them to use theme again. OffsetLeft and offsetTop has nothing to do with translation and will never change. – Temani Afif Mar 05 '19 at 08:53
I'm trying to figure out how to change – muhammad tayyab Mar 05 '19 at 08:58
@muhammadtayyab use variable like you did here and increase them. it's the simpliest way – Temani Afif Mar 05 '19 at 08:58
Thanks, I will checkout why transform don't trigger offsetLeft and offsetTop values to change. – muhammad tayyab Mar 05 '19 at 09:10
@muhammadtayyab because this is the pupose of transform. It doesn't change the layout and the dom, it's only a visual transformation .. so left/top of your element will not change, it's different from using top/left because top/left will change the DOM and the *real* element position – Temani Afif Mar 05 '19 at 09:12
1

@muhammadtayyab check this one : https://stackoverflow.com/questions/4975727/how-do-i-get-the-position-of-an-element-after-css3-translation-in-javascript it may give you ideas – Temani Afif Mar 05 '19 at 09:13
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/189441/discussion-between-muhammad-tayyab-and-temani-afif). – muhammad tayyab Mar 05 '19 at 09:20

Can animation only be applied to 'absolute' positioned elements?

2 Answers2