• Stars
    star
    3,505
  • Rank 12,690 (Top 0.3 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 13 years ago
  • Updated over 3 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A simple but powerful tweening / animation library for Javascript. Part of the CreateJS suite of libraries.

TweenJS

TweenJS is a simple tweening library for use in Javascript. It was developed to integrate well with the EaselJS library, but is not dependent on or specific to it (though it uses the same Ticker and Event classes by default). It supports tweening of both numeric object properties & CSS style properties.

Example

The API is simple but very powerful, making it easy to create complex tweens by chaining commands.

var tween = createjs.Tween.get(myTarget)
    .to({x:300},400)
    .set({label:"hello!"})
    .wait(500).to({alpha:0,visible:false},1000)
    .call(onComplete);

The example above will create a new tween instance that:

  • tweens the target to an x value of 300 over 400ms and sets its label to "hello!"
  • waits 500 ms
  • tweens the target's alpha to 0 over 1s & sets its visible to false
  • calls the onComplete function

Tweens are composed of two elements: steps and actions.

Steps define the tweened properties and always have a duration associated with them (even if that duration is 0). Steps are defined with the "to" and "wait" methods. Steps are entirely deterministic. You can arbitrarily set a tween's position, and it will always set the same properties for that position.

Actions do not have a duration, and are executed between steps. They are defined with the "call", "set", "play", and "pause" methods. They are guaranteed to execute in the correct order, but not at the precise moment in time that is indicated in the sequence. This can lead to indeterminate results, especially when tweens are interacting via the play and pause actions.

Tweens support a number of configuration properties, which are specified as the second param when creating a new tween:

createjs.Tween.get(target, {loop:true, useTicks:true, css:true, ignoreGlobalPause:true}).to(etc...);

All configuration properties default to false. The properties are:

  • loop - indicates whether the tween should loop when it reaches the end
  • useTicks - the tween will use ticks for duration instead of milliseconds
  • css - enables css mapping for some css properties
  • ignoreGlobalPause - the tween will continue ticking even when Ticker is paused.

When using Tween.get, you can also specify true as the third parameter to override any active tweens on the target.

createjs.Tween.get(target,null,true); // this will remove any existing tweens on the target.

Support and Resources

It was built by gskinner.com, and is released for free under the MIT license, which means you can use it for almost any purpose (including commercial projects). We appreciate credit where possible, but it is not a requirement.

Classes

Tween Returns a new Tween instance.

Timeline The Timeline class synchronizes multiple tweens and allows them to be controlled as a group.

Ease The Ease class provides a collection of easing functions for use with TweenJS. It does not use the standard 4 param easing signature. Instead it uses a single param which indicates the current linear ratio (0 to 1) of the tween.

Thanks

Special thanks to Robert Penner for his easing equations, which form the basis for the Ease class.

More Repositories

1

EaselJS

The Easel Javascript library provides a full, hierarchical display list, a core interaction model, and helper classes to make working with the HTML5 Canvas element much easier.
JavaScript
8,073
star
2

SoundJS

A Javascript library for working with Audio. It provides a consistent API for loading and playing audio on different browsers and devices. Currently supports WebAudio, HTML5 Audio, Cordova / PhoneGap, and a Flash fallback.
JavaScript
4,384
star
3

PreloadJS

PreloadJS makes preloading assets & getting aggregate progress events easier in JavaScript. It uses XHR2 when available, and falls back to tag-based loading when not.
JavaScript
2,855
star
4

Zoe

Zoë is an open source tool for generating spritesheet images and frame data from SWF files. It enables illustrators to maintain a familiar workflow while generating animations for EaselJS and other formats.
ActionScript
328
star
5

CreateJS

Repo for combined CreateJS library. Mainly for CDNs.
227
star
6

EaselJSRenderers

Runtime pluggable renderers for EaselJS (Canvas 2D, WebGL, HTML DOM, SVG).
JavaScript
165
star
7

sandbox

Contains demos, helper classes, experiments, and other resources that don't belong in the main repos.
JavaScript
150
star
8

Combined

Hosts the combined CreateJS library, and the tools for building it.
JavaScript
120
star
9

AdobeAnimateDemo

Mini game with visual assets created in Adobe Animate CC
JavaScript
103
star
10

EaselJS-NodeJS

A NodeJS compatible build of EaselJS.
89
star
11

html5ads

An in-depth white paper on building HTML5 advertising with CreateJS and Flash Pro. Includes supporting materials, sample banner ad, and helper classes.
JavaScript
72
star
12

localization

Repo for collaborative creation of localized documentation.
JavaScript
47
star
13

core

Core code shared by two or more CreateJS libraries. For example, the event model.
JavaScript
14
star
14

build

The CreateJS build tools & process.
CSS
10
star