Animating breaks css padding?

[kirkins]

I'm using animate translate x to move an element 100 to the right. Then after that I do the same thing but -100 in an attempt to return it to the original position.

But the final position of the card is off because the original css padding is not acknowledged.

Code:

function drawCard() {
  animate({
    el: "#card",
    translateX: 100,
    opacity: 0,
    duration: 500,
    complete: animateCard
  }); 
}

function animateCard() {
  animate({
    el: "#card",
    translateX: -100,
    opacity: 1,
    duration: 500 
  }); 
}

[bendc]

Please read the documentation, the problem you're experiencing is just a wrong usage of the API.

[kirkins]

You mean the 1 page README that says this javascript animation library is a css animation library? That's where I copied the function from.

Animating over-rides default css properties but I guess that is your desired behaviour.