API Documentation for: 1.0.0
Show:

CSSPlugin Class

Defined in: CSSPlugin:38
Module: TweenJS

A TweenJS plugin for working with numeric CSS string properties (ex. top, left). To use simply install after TweenJS has loaded:

createjs.CSSPlugin.install();

CSSPlugin works with almost any style property or unit. It identifies CSS values by looking for an initial value on the element's style object. It also uses this initial value to parse out the units to use with that value.

In the following example, top would be tweened as a style using em units using CSSPlugin, but width would be not be tweened as a style (because there is no initial inline style value for it).

myEl.style.top = "10em";
createjs.Tween.get(myEl).to({top:20, width:100}, 1000);

CSSPlugin can also use computed styles. Please see AbstractTween/compute:property for more information.

CSSPlugin has specific handling for the transform style, and will tween any transforms as long as their operations and units match. For example:

myEl.style.transform = "translate(20px, 30px)";
createjs.Tween.get(myEl)
    .to({transform: "translate(40px, 50px)"}, 900) // would be tweened, everything matches
    .to({transform: "translate(5em, 300px)"}, 900) // would NOT be tweened, different units (px vs em)
    .to({transform: "scaleX(2)"}, 900) // would NOT be tweened, different operations (translate vs rotate)

You can also use * to copy the operation at that position from the previous transform.

myEl.style.transform = "translate(0px, 0px) rotate(0deg)";
createjs.Tween.get(myEl)
    .to({transform: "translate(50px, 50px) *"}, 900) // would copy the "rotate" operation
    .to({transform: "* rotate(90deg)"}, 900) // would copy the "translate" operation

Please note that the CSS Plugin is not included in the TweenJS minified file.

Constructor

CSSPlugin

()

Defined in CSSPlugin:38

Item Index

Methods

Properties

Methods

change

(
  • tween
  • step
  • prop
  • value
  • ratio
  • end
)
Any static

Defined in change:202

Called before a property is updated by the tween. See change for more info.

Parameters:

Returns:

Any:

init

(
  • tween
  • prop
  • value
)
Any static

Defined in init:152

Called by TweenJS when a new property initializes on a tween. See init for more info.

Parameters:

Returns:

Any:

install

() static

Defined in install:143

Installs this plugin for use with TweenJS. Call this once after TweenJS is loaded to enable this plugin.

step

(
  • tween
  • step
  • props
)
static

Defined in step:187

Called when a new step is added to a tween (ie. a new "to" action is added to a tween). See step for more info.

Parameters:

Properties

compute

Boolean static

Defined in compute:113

By default, CSSPlugin uses only inline styles on the target element (ie. set via the style attribute, style property, or cssText) to determine which properties should be tweened via CSS, and what units to use.

Setting compute to true causes CSSPlugin to use getComputedStyle for this purpose. This has the advantage of including all styles that effect the target element, however there are some important considerations for its use:

  • getComputedStyle is computationally expensive, which could lead to performance issues if you are creating a large number of tweens at once.
  • styles are normalized. For example, a width value specified as a % may be computed as px, which CSSPlugin will use for the tween. Different browsers may normalize values differently.
  • there are a large number of computed styles, which increases the chance that a property will be identified as a style.
  • does not work with IE8 or below. 

The compute setting can be overridden on a per-tween basis by setting tween.pluginData.CSS_compute. For example,
to enable computed styles for a new tween, you could use:

    createjs.Tween.get(el, {pluginData:{CSS_compute:true}}).to({top:20}, 1000);

Given the considerations for compute, it is recommended that you keep the default global setting of false and override it
in specific cases via pluginData.

Default: false

ID

String static readonly

Defined in ID:89

READ-ONLY. A unique identifying string for this plugin. Used by TweenJS to ensure duplicate plugins are not installed on a tween.

priority

Unknown protected static

Defined in priority:82

VALUE_RE

RegExp static readonly

Defined in VALUE_RE:98

READ-ONLY.