I'll preface this by saying my initial problem is difficult to reproduce. Brief explanation of my problem following, question is at the bottom.

So I am using the Jquery multislider for a project. Here is a link to it: Multislider

Now my issue is that the animation of the moving elements seems to lag... Sometimes. It jumps instead of moving smoothly. The way the element works is by applying the animate() method to the first item and applies an inline margin-left property to the first .item

With some research I have found that CSS animations often cause problems when margins are used for the animation(among some other properties like top/bottom/left/right, as well as height/width) and that using transform is preferable. So far so good.

This is the snippet in the javascript that creates the animation:

function singleLeft(){
        isItAnimating(function(){
            reTargetSlides();
            $imgFirst.animate(
                {
                    marginLeft: -animateDistance /* This is the part that causes me problems */
                }, {
                    duration: animateDuration,
                    easing: "swing",
                    complete: function(){
                        $imgFirst.detach().removeAttr('style').appendTo($msContent);
                        doneAnimating();
                    }
                }
            );
        });
    }

    function singleRight(){
        isItAnimating(function(){
            reTargetSlides();
            $imgLast.css('margin-left',-animateDistance).prependTo($msContent);
            $imgLast.animate(
                {
                    marginLeft: 0
                }, {
                    duration: animateDuration,
                    easing: "swing",
                    complete: function(){
                        $imgLast.removeAttr("style");
                        doneAnimating();
                    }
                }
            );
        });
    } 

Now if I understand it correctly, I have to replace the marginLeft: -animateDistance portion with a transformX property, is that correct? But I am failing to make it work.

So my question is, how can I replace the marginLeft: -animateDistance portion with transform: translateX() and add the animateDistance variable between the parentheses?

I have tried something like transform: "translateX(-$(animateDistance))", but that just disables the animation entirely.
Am I missing something? I'm open for other suggestions to solve the issue of the laggy animation as well, this just is the conclusion I came to.