What is the best way to initiate a new animation from the current position?

Question

What is the best way to initiate a new animation from the current position?

Here is my custom box:

<div class="customBox"></div>

It features a unique animation:

.customBox{
  animation:right 5s;
  animation-fill-mode:forwards;
  padding:50px;
  width:0px;
  height:0px;
  display:block;
  background-color:black;
}
@keyframes 

right{from{left:0px;}to{left:300px 
;}}
@keyframes 
left{from{right:0px;}to{right:300p 
x;}}

I also have two buttons:

<button onclick="leftFunction">left</button>
<button onclick="rightFunction">right</button>

If I click left, the box will move to the left. However, if I click right while it's moving left, I want the left animation to stop and the right animation to start from the current position without teleporting.

I'm seeking assistance on this issue. I'm new to coding resources like Stack Overflow.

Below is the JavaScript code:

function leftFunction() {
             
document.getElementById("myDIV").style.animation 
= "left 4s";
}
function rightFunction() {
              
 document.getElementById("myDIV").style. 
animation = "right 4s";
}

javascript html css animation

Answer 1

Answer №1

After reviewing the code you provided, I noticed a few issues that needed to be addressed, but overall you were headed in the right direction.

The DOM method was targeting an element with an ID of myDIV, which did not exist. I modified it to document.querySelector(".mybox") as that is the class name of your div.
You forgot to call the function on your onclick handler, which may have caused the functionality to not work properly. Remember to add parentheses () to invoke it on click.
The code layout lacked proper spacing conventions, possibly due to constraints when posting on Stack Overflow. However, I made necessary adjustments for better readability.
Position values were being set without declaring a position property. I set it to relative to ensure the div stays in the document flow.
Changing both left and right properties separately could lead to unexpected resizing. I changed it to only affect the left property for consistency.

Here is the solution:

Modify your keyframes to update only the left property. Call the function from onclick and pass the event object for seamless animation changes based on target elements.

Utilize CSS custom properties to allow JavaScript to manipulate values effectively. Start the animations from the custom property --cur-pos.

When the function is triggered, fetch the computed left value of the div using getComputedStyle(), and update the custom property --cur-pos accordingly. This ensures the animation starts from the current position of the div.

By following these steps, you should be all set. Adjust the starting --cur-pos value and the end to values as needed, ensuring to update either the left or right positions for horizontal movement, not both simultaneously.

function changeAnimation(e) {
  const box = document.querySelector(".mybox")
  const pos = window.getComputedStyle(box).left
  box.style.setProperty("--cur-pos", pos)
  box.style.animationName = e.target.innerHTML
}

.mybox {
  --cur-pos: 150px;
  width: 100px;
  height: 100px;
  background-color: black;
  position: relative;
  animation: right 4s forwards;
}

@keyframes right {
  from { left: var(--cur-pos); }
  to { left: 300px; }
}

@keyframes left {
  from { left: var(--cur-pos); }
  to { left: 0px; }
}

<div class="mybox"></div>
<button onclick="changeAnimation(event)">left</button>
<button onclick="changeAnimation(event)">right</button>

Answer 2

After reviewing the code you provided, I noticed a few issues that needed to be addressed, but overall you were headed in the right direction.

The DOM method was targeting an element with an ID of myDIV, which did not exist. I modified it to document.querySelector(".mybox") as that is the class name of your div.
You forgot to call the function on your onclick handler, which may have caused the functionality to not work properly. Remember to add parentheses () to invoke it on click.
The code layout lacked proper spacing conventions, possibly due to constraints when posting on Stack Overflow. However, I made necessary adjustments for better readability.
Position values were being set without declaring a position property. I set it to relative to ensure the div stays in the document flow.
Changing both left and right properties separately could lead to unexpected resizing. I changed it to only affect the left property for consistency.

Here is the solution:

Modify your keyframes to update only the left property. Call the function from onclick and pass the event object for seamless animation changes based on target elements.

Utilize CSS custom properties to allow JavaScript to manipulate values effectively. Start the animations from the custom property --cur-pos.

When the function is triggered, fetch the computed left value of the div using getComputedStyle(), and update the custom property --cur-pos accordingly. This ensures the animation starts from the current position of the div.

By following these steps, you should be all set. Adjust the starting --cur-pos value and the end to values as needed, ensuring to update either the left or right positions for horizontal movement, not both simultaneously.

function changeAnimation(e) {
  const box = document.querySelector(".mybox")
  const pos = window.getComputedStyle(box).left
  box.style.setProperty("--cur-pos", pos)
  box.style.animationName = e.target.innerHTML
}

.mybox {
  --cur-pos: 150px;
  width: 100px;
  height: 100px;
  background-color: black;
  position: relative;
  animation: right 4s forwards;
}

@keyframes right {
  from { left: var(--cur-pos); }
  to { left: 300px; }
}

@keyframes left {
  from { left: var(--cur-pos); }
  to { left: 0px; }
}

<div class="mybox"></div>
<button onclick="changeAnimation(event)">left</button>
<button onclick="changeAnimation(event)">right</button>

What is the best way to initiate a new animation from the current position?

Answer №1

Here is the solution:

Similar questions

Utilizing ReactJS useState to eliminate a className

A tip for transferring the value of a binding variable to a method within the template when the button is clicked

Ways to retrieve the checkbox value using PHP in conjunction with XML

Changing the custom route in React Router to utilize a render prop instead of the component prop

Utilizing inputRef in conjunction with MUI's useAutocomplete

Retrieving the value of the button with $(this).val() is the only function that newusername performs

Cannot get Firebase's set() method to work when called within onAuthStateChanged() function

Saving similar and dissimilar information in a database

Save a newly uploaded image to Github utilizing NodeJS and the Github API

What could be the reason for Chrome breaking up this straightforward bootstrap header into two lines?

Storing dropdown selection in database using Laravel form and AJAX

Leverage jquery to adjust the height or width of an element depending on which dimension is larger

Guide for executing Gulp tasks in a sequence one by one

Sending a unicode PHP variable to JavaScript is a breeze

Tips for maintaining the data on a page continuously updating in AngularJS

Accessing HP ALM with REST and JavaScript on a local server: A step-by-step guide

Request Fancybox from parent document within an iframe

What is the best way to implement a recursive service call that is triggered automatically at regular intervals?

Transforming two child arrays within an object into a single array using Ramda

Adjusting hyperlinks placement based on window size changes using jQuery