TweenJS has had a plugin model since the very early versions. Plugins augment or enhance tween capabilities, providing an easy way to tween properties that are not strictly numeric (32px, #ff00ff, “+10”), or modify the resulting value based on a plugin-defined set of rules. The latest version of TweenJS (1.0) has a completely rebuilt plugin model, and ships with a much more robust set of plugins.

History

Starting with version 0.2.0 in 2012, TweenJS shipped with the “CSSPlugin”. This was a super simple example to show how a plugin worked. When a tween on an object was created the plugin did the following:

• Any “width”, “height”, “left”, or “top”, “bottom”, “right”, and “opacity” properties passed to the tween were intercepted
• Position and size parameters were suffixed with “px”
• Properties were applied to the element’s “style” object as well

Version 0.4.0 of TweenJS added a MotionGuidePlugin, which can be used to tween an object along a set of bezier curves. The plugin was created mainly to support tweening along Adobe Animate motion guides, but can be instantiated with code:

See the Pen CreateJS: Simple Motion Guide by CreateJS (@createjs) on CodePen.31824

MotionGuidePlugin documentation

New Plugins

In version 1.0, released in 2018, the plugin model was rebuilt to be easier to use, more efficient, and a number of new plugins were created.

ColorPlugin

A super easy way to tween between two color values. The ColorPlugin supports most color formats: long and short hex (including 32-bit with alpha); RGB and RBGA strings; and HSL and HSLA strings. Named-colors are not supported.

See the Pen TweenJS: ColorPlugin by CreateJS (@createjs) on CodePen.31824

ColorPlugin documentation

RelativePlugin

Sometimes, instead of tweening from a known start-point, you want to tween from the current position. For example, tweening a rotation an additional 30º, you could use “+30”. Not only is this handy for not having to look up the current value, but you can set up tweens ahead of time to tween to arbitrary end-points.

See the Pen TweenJS: RelativePlugin Demo by CreateJS (@createjs) on CodePen.0

RelativePlugin documentation

RotationPlugin

A “SmartRotation” plugin was floating around for a while, which tweens rotation using the “shortest distance” between two angles. For example, tweening from 5º to 355º would tween counter-clockwise 10º, instead of clockwise 350º. The latest version adds a “rotationDir” parameter, which either forces a specific direction, or negates the plugin when “0” is used.
Embed: 

See the Pen TweenJS: RotationPlugin by CreateJS (@createjs) on CodePen.31824

RotationPlugin documentation

CSSPlugin 2.0

The first version of CSSPlugin was an admittedly naive approach to tweening CSS, since it only applies object-level styles, requires absolutely positioned elements, and doesn’t take into account any inherited styles. This made it great as a sample, but perhaps not useful enough for production. A way more robust CSSPlugin has been written from the ground up, which also tweens object transforms, and can tween “computed” styles (which is way more expensive, so it is opt-in).

See the Pen TweenJS: CSS Transform by CreateJS (@createjs) on CodePen.31824

CSSPlugin documentation

Using Plugins

Plugins simply need to be installed, and they will handle the tweening of properties that they understand. For example, CSSPlugin handles “transform”, as well as position and size parameters like width, height, x, y, etc. The RotationPlugin handles “rotation”, and the RelativePlugin understands “+100”.

createjs.CSSPlugin.install();
createjs.Tween.get(div)
  .to({transform:"scale(2,2)"}, 2000, createjs.Ease.quadOut);

That’s it!

The Future

We are hard at work on CreateJS 2.0, which is a port/re-architecture to ES2016 and beyond. But that doesn’t mean we aren’t still building new things.

DotPlugin

The next release of 1.x (January, 2019) includes the DotPlugin. This plugin was created primarily to work with Three.js – which uses a lot of nested properties (eg using .position.x instead of just .x). The DotPlugin is an easy way to target any nested property directly without having to make a bunch of separate tweens for each nested object.

See the Pen TweenJS Dot Plug-in Remix by Lanny (@lannymcnie) on CodePen.31824

Summary

Check out the plugins today using the latest version of TweenJS or CreateJS in the CDN. Other than MotionGuidePlugin, all plugins must be included separately, as they are not included in the combined or minified versions of the library. All plugins, including the new DotPlugin are currently available in GitHub.

Feel free to let us know if you have questions about tweening, or suggestions for more useful plugins. The plugin model is intended for 3rd-party plugins by developers, but we are always happy to build new ones to ship as part of TweenJS if it makes sense.