Jump to content

The Trouble with Tweening [solved]


Recommended Posts

Hi Gang,

Not sure if I'm missing something obvious here. I want to reverse a Tween

Say with the example Tweening from one point to another and then stopping there on completion:


For my purposes, I'm wanting to essentially 'toggle' this Tween. I.e. halfway through the tweening, even before it's reached it's final destination, if some event occurs I want to reverse the tween right away. (And vice-versa, if some event then occurs.

An example of a use-case would possibly be a button. The user checks it, and then there is a smooth visual effect with the tween to mark the button as checked. But half-way through the tween, the user changes their mind, clicks the button again, so I would expect the tween to basically instantly reverse.

Checking the docs, and playing around with switching yoyoEnabled on/off, and reversed on/off don't seem to do anything. 

I can somewhat achieve this effect (for a button anyway) by dynamically chaining tween actions. But this is ugly, and not a nice solution. Or maybe I coded it incorrectly.

Any thoughts?

Cheers, D

Link to comment
Share on other sites


I have just added new reverse method to Tween class. It has boolean parameter, which if you set to true, will force the tween to start if it's not playing (not started or already ended).

Here is example usage:

game.createScene('Main', {
    init: function() {
        this.sprite = new game.Sprite('panda.png');
        this.sprite.interactive = true;
        this.sprite.mouseover = this.tweenIn.bind(this);
        this.sprite.mouseout = this.tweenOut.bind(this);
    tweenIn: function() {
        if (this.tween) this.tween.reverse(true);
        else {
            this.tween = game.Tween.add(this.sprite.scale, {
                x: 2, y: 2
            }, 2000).start();
    tweenOut: function() {

This will tween the sprite scale to 200% if you move your mouse over it, and then scale it back to 100% as soon as you move your mouse out of it, by reversing the tween.


Link to comment
Share on other sites

Yeah you can update to latest dev version of the engine by enabling "Update to dev version" in the settings:


Or if you click on the "Yes" button in the update pop-up while pressing down Shift-key, it will also update to latest dev (even if not enabled from settings).


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...