Tweens on same element

Question

If I apply 2 tweens at the same element it will not Tween. Why? Or am I doing something wrong?

_input.tween('opacity', 1);
_input.tween('height', '100px');
// nothing happens

But both work individually.

Fiddle

Answer 1

Element.prototype.tween is an abstraction of Fx.Tween, which creates a new Fx.Tween instance on that element and binds to a single property at a time.

http://mootools.net/docs/core/Fx/Fx.Tween#Element-Properties:tween - you are instatiating two tweens which probably interfere with each other since iirc, the element getter/setter can only work with a single instance - which goes into Element Storage.

you want to use morph instead - http://mootools.net/docs/core/Fx/Fx.Morph and pass an object, i.e.

_input.morph({
    opacity: 1,
    height: 100
});

morph was meant to modify multiple properties on the same element object on a unified timer.

you could manually do new Fx.Tween(_input, ... ) twice and it will work but it may not be 100% on the same clock for the animation so it may seem choppy