Flipping Animation onComplete

[bethios 0 Likes (Newbie)]

New to the forums and I'm trying to make this little 8-bit cat walk across the screen and when he gets there to flip 180 degrees and walk back.  Haven't quite been able to figure out the proper way.  Now I just have a moon-walking cat lol

See the Pen LrYrdV by bethios (@bethios) on CodePen

[Carl 11,167 Likes (Superhero)]

Welcome to the GreenSock forums!

 

Thanks for the demo.

 

The trick here is to invert the scaleX value on each repeat: 

var scale = 1;

function flip(){
    TweenLite.set('.cat-chased',  {
        scaleX: scale *= -1
    })
}    

 

See the Pen GGRBRO?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Your flip() function wasn't being called because it was set to onComplete. Your tween that moved the cat horizontally was set to repeat infinitely (repeat:-1) so technically it would never complete. onRepeat fires after each iteration of the tween is done.

 

[bethios 0 Likes (Newbie)]

Ah! Thank you! 

[GreenSock 18,582 Likes (Superhero)]

Here's another way you can do it with an onRepeat: 

See the Pen ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Happy tweening!