JavaScript Animation Mastery

Question

JavaScript Animation Mastery

I attempted to move the small yellow box within the larger red box in all directions endlessly. Although I successfully moved it to the right and bottom, I encountered issues moving it to the left and top. Despite using Visual Studio Code, I couldn't resolve the problem. Can anyone help me with the Javascript code for this task?

 window.onload = function(){
                var posX = 0,posY = 0, posZ=0;
                var smallbox = document.getElementById("smallbox");
                var time = setInterval(move,10);
    
                function move(){
                    if(posX>=150){
                       if(posY>=150){
                            if(posZ>=150){
                                clearInterval(time);
                            }
                            else{
                                posZ++;
                                smallbox.style.right = posZ + "px";
                            }
                        }
                        else{
                            posY++;
                            smallbox.style.top = posY + "px";
                        }
                    }
                    else{
                        posX = posX+1;
                        smallbox.style.left = posX + "px"; 
                    }
                }
            }

        #bigbox{
            height: 200px;
            width: 200px;
            background-color: red;
            position: relative;
        }
        #smallbox{
            height: 50px;
            width: 50px;
            background-color: yellow;
            position: absolute;
        }

<div id="bigbox">
   <div id="smallbox">
    
   </div>
</div>

javascript html css frontend

Answer 1

Answer №1

If your animation isn't functioning properly, it could be due to using CSS alignments that require either "top" or "bottom" and "left" or "right" for proper alignment of objects. It seems like you may be attempting to align horizontally using "left" and then trying to align horizontally using "right", essentially cancelling each other out.

Instead, I recommend using code that follows this logic:

if at top-left, move right.
if at top-right, move down.
if at bottom-right, move left.
if at bottom-left, move up.

An illustration of this concept in action can be seen below:

window.onload = function() {
  var posX = 0,
    posY = 0,
    boxW = 200,
    boxH = 200,
    smallboxW = 50,
    smallboxH = 50;
  var smallbox = document.getElementById("smallbox");
  var time = setInterval(move, 10);

  function move() {
    if (posY <= 0 && posX < boxW) {
      // go right
      posX++;
      smallbox.style.left = posX + "px";
    }
    if (posX >= boxW - smallboxW && posY < boxH) {
      // go down
      posY++;
      smallbox.style.top = posY + "px";
    }
    if (posY >= boxH - smallboxH && posX > 0) {
      // go left
      posX--;
      smallbox.style.left = posX + "px";
    }
    if (posX <= 0 && posY > 0) {
      // go up
      posY--;
      smallbox.style.top = posY + "px";
    }
  }
}

#bigbox {
  height: 200px;
  width: 200px;
  background-color: red;
  position: relative;
}

#smallbox {
  height: 50px;
  width: 50px;
  background-color: yellow;
  position: absolute;
}

<body>
  <div id="bigbox">
    <div id="smallbox">

    </div>
  </div>
</body>

Answer 2

If your animation isn't functioning properly, it could be due to using CSS alignments that require either "top" or "bottom" and "left" or "right" for proper alignment of objects. It seems like you may be attempting to align horizontally using "left" and then trying to align horizontally using "right", essentially cancelling each other out.

Instead, I recommend using code that follows this logic:

if at top-left, move right.
if at top-right, move down.
if at bottom-right, move left.
if at bottom-left, move up.

An illustration of this concept in action can be seen below:

window.onload = function() {
  var posX = 0,
    posY = 0,
    boxW = 200,
    boxH = 200,
    smallboxW = 50,
    smallboxH = 50;
  var smallbox = document.getElementById("smallbox");
  var time = setInterval(move, 10);

  function move() {
    if (posY <= 0 && posX < boxW) {
      // go right
      posX++;
      smallbox.style.left = posX + "px";
    }
    if (posX >= boxW - smallboxW && posY < boxH) {
      // go down
      posY++;
      smallbox.style.top = posY + "px";
    }
    if (posY >= boxH - smallboxH && posX > 0) {
      // go left
      posX--;
      smallbox.style.left = posX + "px";
    }
    if (posX <= 0 && posY > 0) {
      // go up
      posY--;
      smallbox.style.top = posY + "px";
    }
  }
}

#bigbox {
  height: 200px;
  width: 200px;
  background-color: red;
  position: relative;
}

#smallbox {
  height: 50px;
  width: 50px;
  background-color: yellow;
  position: absolute;
}

<body>
  <div id="bigbox">
    <div id="smallbox">

    </div>
  </div>
</body>

Answer 3

Answer №2

Enhance your coding experience by leveraging the capabilities of CSS within JavaScript using Element.animate().

With this feature, you can easily pause and resume animations as needed.

const smallbox = document.querySelector('#smallbox');

smallbox.animate([
  // keyframes
  {
    transform: 'translate(150px, 0px)'
  },
  {
    transform: 'translate(150px, 150px)'
  },
  {
    transform: 'translate(0px, 150px)'
  },
  {
    transform: 'translate(0px, 0px)'
  },
  {
    transform: 'translate(150px, 0px)'
  },
], {
  // timing options
  duration: 2000,
  iterations: Infinity
});

#bigbox {
  height: 200px;
  width: 200px;
  background-color: red;
  position: relative;
}

#smallbox {
  height: 50px;
  width: 50px;
  background-color: yellow;
  position: absolute;
}

<div id="bigbox">
  <div id="smallbox">

  </div>
</div>

Answer 4

Enhance your coding experience by leveraging the capabilities of CSS within JavaScript using Element.animate().

With this feature, you can easily pause and resume animations as needed.

const smallbox = document.querySelector('#smallbox');

smallbox.animate([
  // keyframes
  {
    transform: 'translate(150px, 0px)'
  },
  {
    transform: 'translate(150px, 150px)'
  },
  {
    transform: 'translate(0px, 150px)'
  },
  {
    transform: 'translate(0px, 0px)'
  },
  {
    transform: 'translate(150px, 0px)'
  },
], {
  // timing options
  duration: 2000,
  iterations: Infinity
});

#bigbox {
  height: 200px;
  width: 200px;
  background-color: red;
  position: relative;
}

#smallbox {
  height: 50px;
  width: 50px;
  background-color: yellow;
  position: absolute;
}

<div id="bigbox">
  <div id="smallbox">

  </div>
</div>

Answer 5

Answer №3

Using the CSS keyframes for animation is a viable alternative.

#bigbox {
  height: 200px;
  width: 200px;
  background-color: red;
  position: relative;
}

#smallbox {
  height: 50px;
  width: 50px;
  background-color: yellow;
  position: relative;
  animation: move-around 4s infinite linear;
}

@keyframes move-around {
  0% {
    left: 0;
    top: 0;
    transform: translate(0%, 0%);
  }
  25% {
    left: 100%;
    top: 0;
    transform: translate(-100%, 0%);
  }
  50% {
    left: 100%;
    top: 100%;
    transform: translate(-100%, -100%);
  }
  75% {
    left: 0;
    top: 100%;
    transform: translate(0%, -100%);
  }
  100% {
    left: 0;
    top: 0;
    transform: translate(0%, 0%);
  }
}

<body>
  <div id="bigbox">
    <div id="smallbox">

    </div>
  </div>
</body>

Answer 6

Using the CSS keyframes for animation is a viable alternative.

#bigbox {
  height: 200px;
  width: 200px;
  background-color: red;
  position: relative;
}

#smallbox {
  height: 50px;
  width: 50px;
  background-color: yellow;
  position: relative;
  animation: move-around 4s infinite linear;
}

@keyframes move-around {
  0% {
    left: 0;
    top: 0;
    transform: translate(0%, 0%);
  }
  25% {
    left: 100%;
    top: 0;
    transform: translate(-100%, 0%);
  }
  50% {
    left: 100%;
    top: 100%;
    transform: translate(-100%, -100%);
  }
  75% {
    left: 0;
    top: 100%;
    transform: translate(0%, -100%);
  }
  100% {
    left: 0;
    top: 0;
    transform: translate(0%, 0%);
  }
}

<body>
  <div id="bigbox">
    <div id="smallbox">

    </div>
  </div>
</body>

JavaScript Animation Mastery

Answer №1

Answer №2

Answer №3

Similar questions

Crafting numerous CSS templates

Is there a way to retrieve a comprehensive list of all the potential routes in my nuxt.js project?

Tips for preventing divs from sliding to the next row when adding margin in Bootstrap

Error in Mocha test: Import statement can only be used inside a module

The Angular $http.jsonp() function can only be executed one time

Sending a blob object via Websocket on a remote server and a string on a local server

Seeking particular section of online content in an asynchronous manner

What is the best way to have text fit perfectly into a table cell?

Display HTML content generated by JavaScript in the page source

What are the best practices for utilizing "async/await" and "promises" in Node.js to achieve synchronous execution?

What is the best way to change the name of a property within an object

securely managing file access through lockfile.locksync in node.js

Determine the number of network requests being made on a webpage

Exploring ways to animate a conditionally displayed component when the state changes using a combination of javascript and css

CSS problem: Footer encroaching on the content above

The Axios.get function is mistakenly returning raw HTML instead of the expected JSON data

"Stuck in a Standstill: Express/React Commit

Attach the Bootstrap-Vue modal to the application's template

Adjusting div to not be absolutely positioned

Issue with TypeScript in Vue3: Unable to access computed property from another computed property