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

Is it recommended to use separate Controllers for each tab in Angular JS to load the pane?

Tips for transmitting information from the main window to a child in JavaScript

Modifying button text with jQuery is not feasible

What is the best way to incorporate several php files into a WordPress post?

Tips on making Material-UI Drawer compress other content when it is open

Using the Context API dispatch (consumer) within the _app.js class component in Next.js

An Exploration into the Error Situations of NPM Request Library

Ways to avoid losing data when a page is refreshed

"Failed authentication for client" in the testing environment of PayPal sandbox

Enhancing my code by implementing various conditions in React

Combine the information from 3 separate subscriptions into a single object using RxJS in Angular 9

What could be causing Media-Query to fail when using the max-width media feature?

Refresh numerous HTML <div>'s using data from a JSON object

Discovering the initial vacant row within an HTML table with Javascript

Issue with Slider Width in WP 5.6 editor and ACF Pro causing layout problems

Navigating with Express and Vue

GTM - monitoring the most recent clicked element's input data

Implementing a backdrop while content is floating

Is there a way to utilize PHP/HTML to exhibit a diverse array of random images as dynamic background visuals?

Issues with playing Html 5 video arise when making an ajax call