tween composition.

[marcusx2]

Please see Phaser3's timeline. It's possible to chain tweens. I find it very useful and much easier to work with when you intend that all of your tweens be a single animation in sequence.

Don't confuse with my timeline request.

[yaustar]

Is not possible to chain tweens at the moment? Or is this something different?

[marcusx2]

I think I made a misleading title, didn't explain myself well. Yes, I can chain tweens as it is, but I'd like to have a single entity that can register all tweens and play them as a single animation.

[yaustar]

I'm not sure if understand the difference here. You can chain the tweens together then play at a later stage in the code

[yaustar]

eg

var tween = app.tween(color).to(new pc.Color(0, 1, 1), 1, pc.Linear).to(new pc.Color(0, 1, 0), 1, pc.Linear);

// Later in code
tween.start();

[marcusx2]

Oh....wonderful. My bad. This implementation is better than Phaser3's.

[yaustar]

Actually, I think I'm wrong in this. Tweens can't be chained in a quick test. The methods can but not the tween.

[marcusx2]

Oh. Ok lol. Being able to chain them would be cool.

[yaustar]

A current workaround is to do the following which is not great syntactically:

var OpacityTween = pc.createScript('opacityTween');

// initialize code called once per entity
OpacityTween.prototype.initialize = function() {
    var entity = this.entity;
    this.tween = entity.tween(entity.element)
        .to({opacity: 0, width: 200, height: 100}, 0.5, pc.Linear)
        .on('complete', function () {
            entity.tween(entity.element).to({opacity: 0.5, width: 400, height: 200}, 4, pc.CubicIn).start()
                .on('complete', function() {
                    entity.enabled = false;
                });
        });
};

// update code called every frame
OpacityTween.prototype.update = function(dt) {
    if (this.app.keyboard.wasPressed(pc.KEY_1)) {
        this.tween.start();
    }
};

Example: https://playcanvas.com/editor/scene/1194337

Press 1