Elastic.easeOut control

[djwaas 1 Likes (Newbie)]

Simple question please:

I'm making a game, where a card appears on screen, and the user must enter a correct answer related to the card to move on to the next card.
The faster the answer, the more points he scores.
Every card appears on screen with an Elastic.easeOut in its movement.

 

My problem is: If the user enters the correct answer very fast, he still must wait for the Elastic.easeOut of the displayed card to finish until the new card enters the screen.

 

My goal is: If the user enters the correct answer before Elastic.easeOut of the displayed card is over, the timeline should instantly jump to the end of the running Elastic.easeOut ease, and launch the two appended animations.
Is that possible?

Here's my code:

 

var tl36 = new TimelineMax();   
tl36.to(card[variableToIncrement], 2.5, {rotationY:"+=360", x:centerScreen_X, alpha:1, ease:Elastic.easeOut}); //First card appears and moves to center of screen

public function inputOK_handler(e:MouseEvent) //When user hits OK after he's entered a number
{
    if (enteredNumber == cardValue) //The condition of a correct answer
    {
        trace("Right Answer!");
        tl36.to(card[variableToIncrement],   2.5, {rotationY:"+=360", x:outsideScreen_X,  alpha:0, ease:Elastic.easeOut}, "-=0");   //The card in center moves out of screen
        tl36.to(card[variableToIncrement+1], 2.5, {rotationY:"+=360", x:centerScreen_X,   alpha:1, ease:Elastic.easeOut}, "-=2.5"); //The next card makes its appearance simultaneously
        variableToIncrement = ++variableToIncrement;
    }
}    

I tried killing the timeline when a correct answer is entered, but the results are not what I'm seeking.

So far, I use ease.None, but I would love to keep the Elastic easing.

Many thanks in advance!

[Carl 9,066 Likes (Superhero)]

from what I see and understand of your code I think you can just jump the timeline ahead to its end BEFORE adding the new tweens like

 

public function inputOK_handler(e:MouseEvent) //When user hits OK after he's entered a number
{
    if (enteredNumber == cardValue) //The condition of a correct answer
    {
        
        trace("Right Answer!");
//Jump playhead forward to end
        tl.progress(1);
        tl36.to(card[variableToIncrement],   2.5, {rotationY:"+=360", x:outsideScreen_X,  alpha:0, ease:Elastic.easeOut}, "-=0");   //The card in center moves out of screen
        tl36.to(card[variableToIncrement+1], 2.5, {rotationY:"+=360", x:centerScreen_X,   alpha:1, ease:Elastic.easeOut}, "-=2.5"); //The next card makes its appearance simultaneously
        variableToIncrement = ++variableToIncrement;
    }
}  

Another option might be to add the new tweens at the current time() like

 

public function inputOK_handler(e:MouseEvent) //When user hits OK after he's entered a number
{
    if (enteredNumber == cardValue) //The condition of a correct answer
    {
        trace("Right Answer!");
        tl36.to(card[variableToIncrement],   2.5, {rotationY:"+=360", x:outsideScreen_X,  alpha:0, ease:Elastic.easeOut}, tl36.time());   //place tween in the timeline at current location of playhead
        tl36.to(card[variableToIncrement+1], 2.5, {rotationY:"+=360", x:centerScreen_X,   alpha:1, ease:Elastic.easeOut}, tl36.time()); //same
        variableToIncrement = ++variableToIncrement;
    }
}  

[djwaas 1 Likes (Newbie)]

@Carl:

I tried your second option, and it works like a charm!

Thanks a lot mate!