Tween Component


TweenEnd [an object containing the properties that finished tweening = {Object}]
when a tween finishes

Component to animate the change in 2D properties over time.



Back to top


The rate of the tween. This property defaults to 1. When setting tweenSpeed to 0.5, tweens will take twice as long, setting it to 2.0 will make them twice as short

Back to top


public this .cancelTween(String target)

The property to cancel

public this .cancelTween(Object target)

An object containing the properties to cancel.

Stops tweening the specified property or properties. Passing the object used to start the tween might be a typical use of the second signature.

Back to top


public this .pauseTweens()

Pauses all tweens associated with the entity

Back to top


public this .resumeTweens()

Resumes all paused tweens associated with the entity

Back to top


public this .tween(Object properties, Number duration[, String|function easingFn])

Object of numeric properties and what they should animate to


Duration to animate the properties over, in milliseconds.


A string or custom function specifying an easing. (Defaults to linear behavior.) See Crafty.easing for more information.

This method will animate numeric properties over the specified duration. These include x, y, w, h, alpha and rotation.

The object passed should have the properties as keys and the value should be the resulting values of the properties. The passed object might be modified if later calls to tween animate the same properties.


Move an object to 100,100 and fade out over 200 ms.

Crafty.e("2D, Tween")
   .attr({alpha: 1.0, x: 0, y: 0})
   .tween({alpha: 0.0, x: 100, y: 100}, 200)


Rotate an object over 2 seconds, using the "smootherStep" easing function.

Crafty.e("2D, Tween")
   .tween({rotation:180}, 2000, "smootherStep")