JavaScript Motion Tween

Thanks to Philippe Maegerman!

Tween

Tween manages the shift from one property value to another property value for an object.

Tween - Abbreviation for "In-between". In animation, tweens are the frames that depict a character's or objects' motion between key frames.

Source: Tween.js

Code

<script type="text/javascript" src="Tween.js"></script>
...
var i = document.getElementById("smiley1");
var t = new Tween(i.style, 'left', Tween.elasticEaseOut, 0, 500, 1, 'px'); 
t.start();    
    

Object

<img src="smileyFace.jpg" id="smiley1" style="position: relative; left: 0px;"> 
 

ColorTween

ColorTween manages the transition between two colors.

Source: ColorTween.js

Code

<script type="text/javascript" src="Tween.js"></script>
<script type="text/javascript" src="ColorTween.js"></script>
...
var i = document.getElementById("smiley2");
var colorTween = new ColorTween(i.style, 'backgroundColor', Tween.bounceEaseOut, '00FF00', 'FF00FF', 3);
colorTween.start();    
    

Object

<img src="transparentSmiley.gif" id="smiley2" style="background-color: #00FF00;">
    

OpacityTween

OpacityTween manages the alpha value of an object, which determines its visibility.

Source: OpacityTween.js

Code:

<script type="text/javascript" src="Tween.js"></script>
<script type="text/javascript" src="OpacityTween.js"></script>   
...
var i = document.getElementById("smiley3");
var fTween = new OpacityTween(i, Tween.bounceEaseOut, 100, 0, 3);
fTween.start();
    

Object

<img src="smileyFace.jpg" id="smiley3" style="filter:Alpha(opacity=100)">

Sequencing of tweens

Sequencing permits the chaining together of tween effects.

Source: Sequence.js

Code

<script type="text/javascript" src="Tween.js"></script>
<script language="javascript" src="Sequence.js"></script>
...
var paraOne = document.getElementById("smileyOne");
var paraTwo = document.getElementById("smileyTwo");

var seq = new Sequence();

seq.addChild(new
Tween(paraOne.style, 'left', Tween.elasticEaseOut,0,500, 1,'px'));
seq.addChild(new
Tween(paraTwo.style, 'left', Tween.elasticEaseOut,0,500, 1,'px'));

seq.start();

Objects

<img  src="smileyFace.jpg" id="smileyOne" style="position:relative;">
<br>
<img src="smileyFace.jpg" id="smileyTwo" style="position:relative;">

Paralleling of tweens

Parallel permits tweens to run simultaneously, i.e., an object can change in more than one mode at the same time.

Zango Smiley changes position, size, color and opacity simultaneously. A clever fellow!

Source: Parallel.js

Code

<script type="text/javascript" src="Tween.js"></script>
<script type="text/javascript" src="ColorTween.js"></script>
<script type="text/javascript" src="OpacityTween.js"></script>
<script type="text/javascript" src="Sequence.js"></script>
<script type="text/javascript" src="Parallel.js"></script>

...........

var x = document.getElementById("smileyX");

// Change Zango Smiley's visibility from 100% to 25% in 10 seconds
var XTween = new OpacityTween(x, Tween.bounceEaseOut, 100, 25, 10);

// Change Zango Smiley's style.left attribute from 0px to 500px in 5 seconds
var YTween = new Tween(x.style, 'left', Tween.elasticEaseOut,0,500, 5,'px');

// Change Zango Smiley's style.width attribute from 72px to 172px in 5 seconds
var WTween = new Tween(x.style, 'width', Tween.elasticEaseOut, 72, 172, 5, 'px');

// Change Zango Smiley's style.backgroundColor attribute in 3 seconds
var ZTween = new ColorTween(x.style, 'backgroundColor', Tween.bounceEastOut, '00FF00', 'FF00FF', 3);

var p = new Parallel();

p.addChild(YTween);
p.addChild(XTween);
p.addChild(WTween);
p.addChild(ZTween);

p.start();

Object

<img src="transparentSmiley.gif" id="smileyX" style="background-color: #00FF00; position:relative;">

---

Some application examples

A timed three-screen example with a tween/button on each screen.

A timed three-screen example with a fade/button on each screen.

A timed three-screen example with a reverse fade/button on each screen.

A timed three-screen example the runs automatically and does reverse fades.