switch rotation direction depending on var

Question

having some trouble with an tweenlite animation in query. I want to switch the animation direction depending on a variable. I have a variable that represents "left" or "right". those values is set when the user drags the mouse in that direction. And i need to change my animation so it animates in the right direction depending on this variable. The animation basically flips a div. Like a card flip. Need the get the rotation value somehow dynamic.

Any suggestions?

var tb = false;
if (dirX == "right") {
    if (tb == false) {
        TweenLite.to($(this).find(".obj"), 1, {
            rotationY: -180,
            transformStyle: "preserve-3d",
            ease: Back.easeOut,
            onComplete: function () {
                TweenLite.set($(this).find(".obj"), {
                    rotationY: -180
                });
                tb = true;
            }
        });
    }
    if (tb == true) {
        TweenLite.to($(this).find(".obj"), 1, {
            rotationY: -360,
            transformStyle: "preserve-3d",
            ease: Back.easeOut,
            onComplete: function () {
                TweenLite.set($(this).find(".obj"), {
                    rotationY: -360
                });
                tb = false;
            }
        });
    }
}
if (dirX == "left") {
    //the opposit
}

Answer 1

Here is a working fork of your fiddle http://jsfiddle.net/Boolean/b6TUf/4/

Your version did not work for the following reasons.

1. You needed to include the JQueryUI framework.
2. You were not setting prevXPos = event.pageX; as I have in my first answer with prevPos = e.clientX;. This needs to be done after the direction is set to help keep track of the current direction.
3. You were not instantiating the dirX variable.
4. I have targeted ID's rather than classes. It would have worked without but it would not be very optimised.
5. It was spinning many times because you were instantiating the tweens inside the draggable function. This meant that new tweens were being created every times you dragged.
6. You needed to reset the prevXPos = event.pageX; on drag start.

Hope this helps :)

Answer 2

A tween can be set relative to a current position using '+=' or '-=' syntax.

    var prevPos, obj = $('#obj');

    TweenLite.set(obj, {rotationX:30, transformOrigin:"middle middle",transformPerspective:500});

    var tweenLeft =  new TweenLite.to(obj, 1, { rotationY: '+=180', ease: Back.easeOut, paused:true});
    var tweenRight = new TweenLite.to(obj, 1, { rotationY: '-=180', ease: Back.easeOut, paused:true});

    $('#container').mouseenter(function( e ) {
        prevPos = e.clientX;  
    });

    $('#container').mousemove(function( e ) {

        if(!tweenLeft.isActive() && !tweenRight.isActive()){

            if(prevPos > e.clientX){
                tweenRight.restart(); 
            }else if(prevPos < e.clientX){
                tweenLeft.restart();
            }
        }     
        prevPos = e.clientX;

    });

Here it is in action: http://jsfiddle.net/Boolean/teyHa/5/