• Home
  • Jobs
  • Courses
  • Questions
  • Teachers
  • For business
  • ES/EN

0

42
Views
anime.js how to use translatex and update x position of element correctly?

I am using anime.js to translateX an object 200px to right on a button click. I noticed that the animation kept resetting the left-position of the element to 0, so I made a variable to track the left-position. But now when I click the button, the element skips ahead to +200px, and then animates an extra 200px. So now the animation causes a weird glitch where the element slides 400px. Then when I click the button again, the element animation starts -200px, where it should have originally stopped. How do I get the element to slide 200px and stop at 200px?

the element is a fixed position

#character{
    width: 80px;
    height: 100px;
    background-color: green;
    position: fixed;
    bottom: 10px;
    left: 0;
}

anime.js animation for moving

var goRightAnimation = anime({
    targets: 'div#character',
    translateX: '200px',
    autoplay: false
});
var xPositionValue = 0;

function goRightFunc(){

    goRightAnimation.play();
    xPositionValue += 200;
    character.style.left = (xPositionValue)+'px';
    console.log(character.style.left);
}

about 1 month ago ·

Juan Pablo Isaza

Answer question
Find remote jobs
Loading

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post job Plans Our process Sales
Legal
Terms and conditions Privacy policy
© 2022 PeakU Inc. All Rights Reserved.