How do I use LiteTween for a smooth in/out transition?

0 favourites
  • 4 posts
  • After a little bit, I finally got an in/out transition with litetween. When the mouse hovers over the object, it moves up a little bit to show it's selected, once the mouse moves off the object the object moves back down into it's original place. My only problem is that I can only have it trigger the in/out animation once the previous animation is finished. So, I will hover the mouse onto it for a second, initializing the in animation, then take the mouse off, then have to wait a couple of seconds before it does the out animation because it was still busy with the in animation. For now, I have this set up like this on purpose because without it, the object will teleport to the end of the in animation so it can execute the out animation. I know how to stop it from doing this, making it use relative position instead of absolute, but then it very easily goes into the wrong spot because if I take my mouse off when it's only half done the in animation, it will go down much farther than the original position. If anyone knows the solution, it'd be really helpful, thanks!

  • Here are two methods. You can do this with lerp instead (unless you need a specific easing effect):

  • Here are two methods. You can do this with lerp instead (unless you need a specific easing effect):

    Unfortunately, for litetween I’m using elastic out. So using reverse makes it elastic in on the out animation essentially. So I have to have 2 different litetweens. I did figure out a solution though. I stopped the out animation, then began the in animation when the cursor is over the button. Then stop the in animation and begin the out animation when the cursor is off the button. Working great! Guess it bugs out when 2 tweens are active at the same time.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • You should've mentioned in the first post that you are using elastic easing and therefore can't reverse it. Because it's a pretty important piece of information here :)

    I'm glad you figured it out, and I would do the same - use two tweens.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)