JavaScript: My animation doesn't make the element start from the right position.

Hi guys!
I wrote this code:
https://pastebin.com/cHfwEZB8
when I click "Movement" button, the element would have to start from the position in which it is now, and he have to go on right.
But when I click the button, the element teleports to another point before starting to move. Can you tell me why?

Comments

[Ed Reeseg]

So, first we should start off by looking at why that img element appears where it appears in the first place:

#element {
  position: relative;
  cursor: pointer;
  top: 50px;
  right: 450px;
}

You position the element relatively, like you said, and tell it to go down 50px and left 450px from where its natural position on the DOM is.

Next, we look at what happens when you click the button:

move.onclick = function() {
  let start = Date.now();

  let timer = setInterval(function() {
    let timePassed = Date.now() - start;

    element.style.right = timePassed / 5 + 'px';

    if (timePassed > 2000) clearInterval(timer);

  }, 20);
}

When you click the interval, you capture the value of Date.now(), and then set an interval that calculates the time that has passed every 20ms and updates the style attribute in your HTML to make the right attribute equal to whatever amount of pixels equals to the time that has passed.

Note that inline HTML styling has a much higher specificity than the ID Selector you initially used in your CSS to set the img element's position. So, when the interval callback runs for the first time and sets the right property in the inline style attribute to whatever number of pixels represent the time passed so far, it overrides the ID selector in your CSS.

Suddenly, the right: 450px; you put in the CSS doesn't matter anymore. The only thing that matters is whatever amount of pixels is being indicated in your inline style attribute. When this happens, the element pops back over to near where its natural DOM position would be, because those 450px have been reduced to...whatever amount of time has passed, right after the button is clicked. It then increases every 20ms when the interval is run again, pulling it back toward where it originated.

EDIT:

Note that if we change our original styling of #element to be:

#element {
  position: relative;
  cursor: pointer;
}

The element doesn't teleport at all - it just starts moving to the left. This is because the element is starting from the default value of right: 0;, and so when that value begins ticking up when the button is clicked, there's no jarring teleportation when that 450px is overridden.

[AndyBullet]

but I want that it start from the point that I set, not from 0.

[Ed Reeseg]

Difficult for me to test because I'm away from home, but if you're looking to check what the CSS value is, you could use getComputedStyle.

element.style.right =
            // we get the value "450px" from getComputedStyle, 
            // and slice off the px to create a number.
            Number(getComputedStyle(element).right.slice(0, -2)) +
            (timePassed / 5) +
            "px";

Or, alternatively, instead of declaring the right attribute in your CSS, just declare it in your HTML inline if that'll be the result anyways.

<img width="300" height="300" style="right:450px"id="element" src="element.png" />

You can then just reference that value with element.style.right to do the same addition.

Smarter might be to use a keyframes animation that'd be exclusively in CSS. I'd check out this page: developer.mozilla.org/en-US/docs/W...

.element-slide {
    animation: 2s ease forwards slide-left;
}

@keyframes slide-left {
    from {
        right: 450px;
    }
    to {
        right: 900px;
    }
}

You can then toggle the element-slide class on the img element as needed.

[Si]

Please review the sidebar and restructure your question/title. The #help tag will be removed in 24 hours if not done.

[Ben Calder]

I'm curious whether the original post has been edited since you placed this comment? If not I think you need to be a little more specific about how it doesn't meet the criteria. From what I see the OP has provided more than enough info for an answer to be provided (in fact someone has done so already) and surely that is the intent of the channel?

One piece of feedback regarding your feedback: since I accessed the post from the main channel I do not see the sidebar content you speak of. That might be the case for the OP also. And 24 hours is not a reasonable amount of notice IMO.

It's also worth noting that the channel posting guidelines are not necessarily obvious when writing a new post: e.g. from the main channel you have to explicitly click the "view rules" button to see them (it might be better to automatically show them if the #help tag is applied).