Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
mathias5

switch rotationY depending on variable

Recommended Posts

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.

 

Anyone having an idea?

 

CODE

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
}
Link to post
Share on other sites

Hi and welcome to the Greensock forums.

 

In terms of flipping elements I made a codepen a while ago:

 

See the Pen vjGxH by rhernando (@rhernando) on CodePen

 

As you can see is not a very difficult stuff, although I'm not sure if it meets your needs. If not please fork that codepen and accommodate it to what you're after so we can get a better idea of the issue, is always a great help when folks present their problems with reduced live samples, it allow us to tackle this things very quickly.

 

Best,

Rodrigo.

  • Like 1
Link to post
Share on other sites

Hi and thank you!

 

I'm actually using your code pen as a reerence for my stuff. I only changed some things.

I think i made the description of my problem a  bit too complicated.

 

What i need is this:

 

When you have flipped the card and its on -180 i want to be able the control in what direction it should flip back. Almost like a toggle. Now i flip it to -360 when flipping it back. That looks nice. But when i then try to flip it over ageing to its initial (-180) it all gets buggy.

 

Some how i need the flipping-value to be dynamic. 

 

As an example. Your code pen always flips in the same direction. I'd like to be able to control in which direction it should flip back after it has flipped once.

Link to post
Share on other sites

Hi,

 

Now I understand, sorry I didn't catch the concept from the first post.

 

Here's an incredibly simple modification of the codepen, is not a bullet proof scenario but at least it should help you getting started. I'll try to get something more robust during the afternoon.

 

See the Pen IJfAy by rhernando (@rhernando) on CodePen

 

Best,

Rodrigo.

Link to post
Share on other sites

Hi, 

 

I might still be missing exactly what the question is and might be getting lost in the complexity of 3D cards flipping and onComplete callbacks moving stuff around.

 

Honing in on just this aspect of the question:

 

Your code pen always flips in the same direction. I'd like to be able to control in which direction it should flip back after it has flipped once.

 

 

Perhaps our DirectionalRotation capabilities will help which allow you to specifically set the direction of a rotation (clockwise, counter-clockwise or shortest).

 

Take a look at our DirectionalRotation Visualizer:

http://codepen.io/GreenSock/pen/jiEyG

 

*note DirectionalRotation will work fine with rotation, rotationX, rotationY, and rotationZ.

 

 

So maybe the challenge now is just to determine "if the card is flipped once a certain way, make sure it flips back with rotation set to _ccw (counter-clockwise) or _cw (clockwise)".

  • Like 2
Link to post
Share on other sites

Wow, thanks guys!

 

I have been looking at all suggestions and implemented it. It almost works now. I run this on a query draggable event which makes it an infinite tween. How can i pause/stop the tween after every step/180 and then continue on next drag? mean so its not continuously spinning.

 

This is what i run in my drag.

var tweenLeft = new TweenLite.to($(el), 1, { rotationY: '+=180', transformStyle:"preserve-3d",ease:Back.easeOut,perspectiveOrigin:'50% 50% 0px', paused:true});
var tweenRight = new TweenLite.to($(el), 1, { rotationY: '-=180', transformStyle:"preserve-3d",ease:Back.easeOut,perspectiveOrigin:'50% 50% 0px', paused:true});

if(dirX == "right"){
    tweenRight.restart();
}
if(dirX == "left") {
    tweenLeft.restart();
}

Link to post
Share on other sites

Hi,

 

It's hard to see what the problem could be with just those code lines, my only guess is the event that's triggering the function where the tweens are created and executed.

 

Please create a reduced codepen or jsfiddle that demonstrates the issue you're having, in order to get a better idea of what could be causing this.

  • Like 1
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×