Element jumps back to original position

[wesselgrift]

I'm animating a div block to the center of the screen. I've calculate the amount of pixels it should move to the left with translateX. It works. But, when the next animation on that element begins, it snaps back to its original position. The translateX is overwritten or something when 'fade card out' begins, it doesn't stay center screen.

// animate to center
        dynamics.animate(activeCard, {
            translateX: animateCards
        }, {
            type: dynamics.spring,
            friction: 400,
            duration: 1300,
            delay: 600
        });

        // fade card out
        dynamics.animate(activeCard, {
            scale: 1.2,
            opacity: 0
        }, {
            type: dynamics.spring,
            friction: 400,
            duration: 1300,
            delay: 1200
        });

How can I fix the position of this element after i've animated it?

[michaelvillar]

Yeah you need to provide the translateX is the second animation as well. Every transform property (translateX, translateY, rotate,...) is combined to transform, so if you don't pass the other attributes, we assume they're meant to be 0.