mrspoonzy at gmail Cube by Noah Ellman A powerful javascript toolkit, in research © by Noah Ellman

Jwee's Javascript Animation Engine

wee.fx Tween(...)
wee.fx.Tween start()

Jwee's Tween (animation) class is part of the wee.fx toolkit.

The smoothest, fastest, most cpu and memory efficient javascript animation engine ever implemented.

Jwee has a powerful animation engine all of its own. It has been built from the ground up for performance, smoothness, flexability, and ease-of-use for the developer.

Key Features

  • Jwee has the the smoothest and most efficient animation engine in the Javascript world.
  • Start, stop, rewind, reverse, and continue Tweens.
  • Tween any CSS property or a element property like scrollTop.
  • You can tween by a % (percent), by + (plus) or - (minus)
  • You can tween a property like “height” to the value of “auto”, to auto-fit a box
  • Jwee keeps tracks of tweens internally, and will prevent concurrent tweens that are illogical. For example, if you animate opacity to 0 for 3 seconds, but then 1 second later animation opacity to 100, this would normally cause chaos. However, with Jwee, the first tween will automatically stop, and the second tween will start from the first tween's stopping position. Thus, a smooth uniterrupted animation is acheived throughout.

Javascript animation is performance critical code. Code is continuously executing during the animation, and every millasecond matters. Using numerous optimization techniques, jWarp's tween engine acheives beautifully smooth animamtion with very minimal use of computer resources. This means that animations on your web site will be neither a annoyance to the user nor a burden on the browser. Animations shall be non-intrusive and subtle eye-candy, the way they are supposed to be.


For those who are familiar with Flash's Tween class, you will find that jwee's methods and properties are almost identical. The easing equations themselves are currently identical to those used in Flash, which is also what YUI uses.

  • FX.Tween is the a javascript class, and is the guts of jwee's animation engine.
  • HTML Elements also have the magic extended method animate().
  • FX.Tween can be used directly with new if you want, or animations can be controlled from the animate() method on elements, which is easier..

Easing equations

See what the easing equations look like.

Specifying values

  • You always pass the initial value as null. Frodo will figure it out from styles or offsets.
  • You can specify a end value as a string like "+200". This means animate additional units from whatever the value is now.
  • You can even specify "-25%". This would reduce the value of whatever, by 1/4th.

How to make a repeating or chaining animation?

The onComplete property of Tween can also be set to the instance of another Tween. This is the best way to chain tweens.

		var flyright = new FX.Tween("foobox","left",null,"+350",0.6);
		var flyleft = new FX.Tween("fooxbox","left",null,"-350",0.6);
		flyright.onComplete = flyleft; // after flyright then execute flyleft
		flyleft.onComplete = flyright; // and back again forever
		flyright.start(); // start the sequence

Notice in the above example we said "+350" in double quotes. This means go 350 pixels more than the whatever the position is now. Do not forget the quotes, otherwise javascript will just think its a positive number, moving your tween to "350px" exactly.
You can also do it another way if you like:


That would make the element go down 500 then up 250 then down 100 one after the other.

If you just want to trigger something else when the tween ends, you can just assign your own function to the "onComplete" property. There is also the andThen() method of the Tween class.

More ways, doing simultaneous tween

Now this is a bit nuts, but in the code below, I'm creating an array of 3 tweens. Remember that tweens don't start until you call start(), unless you are using the animate() from the element directly. In code below I am calling the each method of the "Array" object, and passing in the name of the function to call upon every object in the array. This is a undocumented feature of the Array's each(). :)

[ new FX.Tween("foobox2","top",0,-100,2),
  new FX.Tween("foobox2","left",0,300,2),
  new FX.Tween("foobox2","width",null,100,2) ].each('.start()');

class new fx.Tween(...)( element,  string property,  [number startValue] or null,  number endValue,  [float duration] ,  [object options] )
The Tween class is the brains of the animation engine.
  1. The element of subject.
  2. The element's property to animate. Assumed to be a style property. Ex: "width" would mean "style.width". If you want to animate a html attribute like the "width" attribute on a IMG element, prefix the string with a period, like ".width".
  3. (optional) The start value for the animation. You can just put "null" here, and Jwee will figure the value out automatically
  4. The end value of the animation, such as 300 for "300px". You can also specify "auto", or "+50" or even "25%"
  5. (optional) The duration of the animation, in seconds, such as "5.5" for 5 and a half seconds.
  6. (optional) An object containing more options you can control.
Returnsnew instance of Tween class
method wee.fx.Tween.start()
Start the animation
method wee.fx.Tween.stop(...)( boolean )
Haults an animation in progress.
  1. {boolean}
method wee.fx.Tween.continueTo(...)( number value,  [float duration] )
Continue the animation with new values.

Continue an animation on the same element / property to a new value.

  • The duration is optional.
  • If the current animation is already running it will be stopped. You don't need to stop it yourself.
  • If the current animation is stopped prematurely the onComplete handler will NOT be called.
method wee.fx.Tween.restart()

Run the animation again from the beginning.

method wee.fx.Tween.yoyo()
Run the opposite of the last animation, just like a yoyo.

Run the reverse of the last animation.

boolean wee.fx.Tween.running
Is the animating currently going?

A true or false whether the current Tween class's animation is currently running.

property wee.fx.Tween.startValue
property wee.fx.Tween.endValue

Discussion on /code-fx-tween

itoa('403892500') 11/05/14 :  

Post a message

itoa('1632341278') 11/05/14 :  

Post a message

itoa('1936654484') 11/05/14 :  

Post a message

Jwee Ninja 11/05/14 :  

God an algorithm?

canado 11/05/14 :  

any bezier implementation?

Zacko 11/05/14 :  

@Xymon: Haha I know right. It's been a long week i swear :P

Zach 11/05/14 :  

Awesome! By the way, I figured out the main part of his Gears animation and replicated it on the test page! SO MUCH EASIER THAN I THOUGHT.

Zach 11/05/14 :  

@Xymon: Sign in with user: test password: test. This is my mom's website I built. That username allows you to see the "Admin" tab, but still blocks access to the pages. Watch the elements inside while they expand. If you use Firebug, you can see the values changing.

Zach 11/05/14 :  

@Xymon: Well here's another then lol. I'm trying to recreate jQuery's collapse method using Jwee. Any ideas on how that might be accomplished? I understand that jQuery individually shrinks and reduces the opacity of all elements in the collapsing container simultaneously, and while I could prob get it working, I want to make sure I'm doing it right so its efficient. Thanks.

Xymon 11/05/14 :  

Yes, they changed again.

Xymon 11/05/14 :  

Hahaha, I just created a jwee animation where the moon will revolve around the earth (zIndex). it flys by the front, then around the back, pretty sweet.

Xymon 11/05/14 :  

jWee needs some sort of spin function. Something that spins an element to a specified angle with a specified speed. Like -webkit-transform: rotate(-90deg); would do, but in a javascript function like element.spin( AngleAsPercentage , speedAsInteger )

Xymon 11/05/14 :  

Haha, yes I remember it from one of the scripts from dizzler. The "fly" and "mosquito". Which I noticed you use a relative example here. Anyway, I've been playing around with this today, will be using it for the windowing framework I'm working on. I'm interested in tooltips and tweens, could you tell me exactly what i need from... jwee.js jwee-element.js jwee-element2.js jwee-misc.js jwee-event.js jwee-fx.js jwee-debug.js jwee-hotbox.js jwee-tooltip.js jwee-form.js jwee-jquery-compat.js

Xymon 11/05/14 :  

Ah I see, I was wondering if maybe that was the case. It was also called MOJO at some point wasn't it?

Xymon 11/05/14 :  

As long as you don't put commands like "EVAL" and actually strip html instead of replacing < with [[ then sure go ahead X'D

Xymon 11/05/14 :  

Well that's pretty weird seeing as how I did what I did.

Admin 11/05/14 :  

Impossible, I totally stripped all tags except images and bold and italics

Xymon 11/05/14 :  

(fix) More of a rival, we talk though. And actually, since you didn't parse out html on the the dizzler profiles, i simply used the style tag to edit the tags, ids and classes of the originally profile. Blocking ads, the topnav, logo and some other shit with display:none and then making my own divs and posting them in html (div id="myMusic" for example), styled in the css I added of course. So yes, I can, and I did :)

Xymon 11/05/14 :  

OH and yes, the posting is just fine now.

Xymon 11/05/14 :  

More of a rival, we talk though. And actually, since you didn't parse out html on the the dizzler profiles, i simply used to edit the tags, ids and classes of the originally profile. Blocking ads, the topnav, logo and some other shit with display:block; and then making my own divs and posting them in html "", styled in the css I added of course. So yes, I can, and I did :)