flash-tweens.html

wait...

Download flash-tweens.js and flash-tweens.html or the full package

Reload this page to replay the animation

Flash Tweens HTML Code

<html>
<head>
    <title>Flash Tweens for JavaScript</title>
    <script src="flash-tweens.js" language="JavaScript"></script>
    <style>
        body { font-family: arial; font-weight: bold }
    </style>
</head>

<body>

<img id="b1" style="position:absolute" src="rick_companje.gif">
<img id="b2" style="position:absolute" src="rick_companje.gif">
<div id="b3" style="padding:5px 5px 5px 5px;position:absolute;background-color:red">wait...</div>

<script>
    //left photo
    new Tween("b1.style.left", 50, 500, 5000, Easing.Strong.easeOut, function() {
        new Tween("b1.style.left", 500, -250, 1500, Easing.Strong.easeInOut, function() {
            //div
            b3.style.backgroundColor = "#00ff00"
            b3.innerHTML = "walk!"
            new Tween("b3.style.top", 0, 500, 3000, Easing.Bounce.easeOut)
            new Tween("b3.style.left", 0, 500, 3200, null, function() {
                new Tween("b3.style.left", 500, -200, 2000, Easing.Strong.easeInOut)
           })
        })
    })
    new Tween("b1.style.top", 0, 300, 2000, Easing.Bounce.easeOut, function() {
        new Tween("b1.style.top", 300, 100, 2000, Easing.Strong.easeInOut)
        new Tween("b1.style.width", 100, 200, 1000, Easing.Bounce.easeInOut, function() {
            new Tween("b1.style.width", 200, 100, 1000, Easing.Bounce.easeInOut)
        })
    })
    //right photo
    new Tween("b2.style.left", 500, 50, 5000, Easing.Strong.easeOut, function() {
        new Tween("b2.style.left", 50, 250, 1000, Easing.Bounce.easeOut, function() {
            new Tween("b2.style.left", 250, -250, 1000, Easing.Strong.easeOut)
        })
    })
    new Tween("b2.style.top", 0, 300, 2000, Easing.Bounce.easeOut, function() {
        new Tween("b2.style.top", 300, 100, 2000, Easing.Strong.easeInOut)
        new Tween("b2.style.width", 100, 200, 1000, Easing.Bounce.easeInOut, function() {
            new Tween("b2.style.width", 200, 100, 1000, Easing.Bounce.easeInOut)
        })
    })
</script>
</body>
</html>

Flash Tweens JavaScript Engine Source Code

/*
----------------------------------------------------------------------------------------------------------
title: Flash Tweens in JavaScript
author: Rick Companje
email: flashtweens@companje.nl
website: www.companje.nl
date: 29 June 2005 (first version 17 September 2004)
copyright: Use it, spread it, change it and email me if you like it.
----------------------------------------------------------------------------------------------------------
description: Use the Flash MX Tweens in your DHTML pages with this JavaScript
----------------------------------------------------------------------------------------------------------
usage:
  1. new Tween("block.Style.left", 100,500,5000,Easing.Strong.easeOut)
  2. new Tween("block.Style.top", 100,500,1000,Easing.Bounce.easeOut, function() {
  3.     new Tween("block.Style.top", 500,100,1000,Easing.Strong.easeInOut)
  4. })

  1. attribute block.Style.left will be tweened using the Strong.easeOut function in 5000 milliseconds from 100 to 500
  2. at the same time block.Style.top will be tweened using the Bounce.easeOut function. This tween takes 500 milliseconds.
  3. after tween 2 has finished, the anonymous function will be called and tween 3 will start tweening.
  4. close all brackets
*/

function Tween(attr,begin,end,duration,ease,finish) {
smooth = 15 // global, don't use var.
var change = end-begin
animate(attr,0,begin,change,duration,ease,finish)
}
function animate(attr,time,begin,change,duration,ease,finish) {
if (!ease) ease = Easing.none;
eval(attr + "=" + ease(time+=smooth,begin,change,duration))
var cmd = "animate('"+attr+"',"+time+","+begin+","+change+","+duration+","+ease+","+finish+")"
if (time<duration) setTimeout(cmd,smooth);
else if (finish) finish();
}

/* Next part of the code is found in the Classes dir of Macromedia Flash MX 2004 */
/* C:\Program Files\Macromedia\Flash MX 2004\en\First Run\Classes\mx\transitions\easing\ */

var Easing = {
none:function(t,b,c,d) { return c*t/d + b },

Strong: {
easeOut:function(t,b,c,d) { return c*((t=t/d-1)*t*t*t*t + 1) + b },
easeIn:function(t,b,c,d) { return c*(t/=d)*t*t*t*t + b },
easeInOut:function(t,b,c,d) {
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
return c/2*((t-=2)*t*t*t*t + 2) + b;
}
},

Bounce: {
easeOut:function(t,b,c,d) {
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
} else {
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
}
}
}