CODEWITHSUNDEEP
javascriptanimationdom
Dragos Strugar
Dragos Strugar

Reputation: 1674

Animate div from left to right and then from right to left

I am watching this talk: https://www.youtube.com/watch?v=cCOL7MC4Pl0

The speaker talks about JS tasks and the DOM rendering. He gives the following example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Task</title>

    <style>
      * {
        box-sizing: border-box;
      }

      .box {
        width: 50px;
        height: 50px;
        background-color: pink;
      }
    </style>
  </head>

  <body>
    <div class="box"></div>

    <script>
      var box = document.querySelector(".box");

      box.addEventListener("click", () => {
        box.style.transform = "translateX(500px)";
        box.style.transition = "transform 1s ease-in-out";
        box.style.transform = "translateX(250px)";
      });
    </script>
  </body>
</html>

And tries to animate the object (on click event) from position 0 to position 500px, and then from 500px to 250px. In other words, from left to right, and from right to the middle.

He uses the following code:

var box = document.querySelector(".box");
box.addEventListener("click", () => {
  box.style.transform = "translateX(500px)";
  box.style.transition = "transform 1s ease-in-out";
  box.style.transform = "translateX(250px)";
});

Then he explained why it didn't work as expected - because the browser would do all the calculations before rendering/performing the animation. All good here.

However, he says that he solves the issue by wrapping the last box.style.transform = "translateX(250px)"; into a double (nested) requestAnimationFrame() call. When I tried to do that, it did the exact same thing as before. It didn't work. Here is the code:

box.style.transform = "translateX(500px)";
box.style.transition = "transform 1s ease-in-out";
requestAnimationFrame(() => {
  requestAnimationFrame(() => {
    box.style.transform = "translateX(250px)";
  });
});

What am I missing here? How to make the browser first perform the transform operation to 500px, and then transform it back to 250px?

Upvotes: 1

Views: 480

Answers (2)

Dragos Strugar
Dragos Strugar

Reputation: 1674

There was a mistake in the video.

This is the correct piece of code:

box.addEventListener("click", () => {
  box.style.transform = "translateX(500px)";

  requestAnimationFrame(() => {
    requestAnimationFrame(() => {
      box.style.transition = "transform 1s ease-in-out";
      box.style.transform = "translateX(250px)";
    });
  });
});

Upvotes: 1

Mahesh S
Mahesh S

Reputation: 395

Use this one setTimeout in the second statement else both statement with executes one by one very fast so did not get it the actual you want.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Task</title>

    <style>
      * {
        box-sizing: border-box;
      }

      .box {
        width: 50px;
        height: 50px;
        background-color: pink;
      }
    </style>
  </head>

  <body>
    <div class="box"></div>

    <script>
      var box = document.querySelector(".box");

      box.addEventListener("click", () => {
        box.style.transform = "translateX(500px)";
        box.style.transition = "transform 1s ease-in-out";
        setTimeout(function(){
        box.style.transform = "translateX(250px)";
        },1000);
      });
    </script>
  </body>
</html>

last statement,

Upvotes: 0

Related Questions