Jacked Tween Engine

Jacked

High Performance MOVES
for Multiple Environments

get it share it test it
google plus twitter
About
Harnessing the power of requestAnimationFrame and CSS3
If you ever worked with Flash, you're certainly familiar with "onEnterFrame". requestAnimationFrame
is an "onEnterFrame" for both Firefox and Chrome, and is head and shoulders better than using
setInterval for animations. Jacked uses it by default.

CSS3 transitions are also great performance boosters in some environments. With Jacked,
you can set any given browser or mobile environment to use CSS3 by default, or you can set any
individual tween to use CSS3. Likewise, if CSS3 is the default, you can explicitly target
requestAnimationFrame for any individual tween.

Some environments are kick ass with requestAnimationFrame. Some environments are kick ass with
CSS3. With Jacked, you get the power of both.
Why use Jacked for CSS3 Transitions?
For some things like rollovers when a fallback isn't necessary, Jacked certainly isn't needed.
But when a fallback is important, Jacked has you covered. And you'll have more control over your
CSS3 transitions with built-in stop methods, callbacks w/ callbackParams and more.
Why not just use Modernizr + jQuery when CSS3 fallbacks are needed?
Easy. Because even when Jacked falls back to setInterval, it's still WAY faster than jQuery.
Settings
Optional Params for tween, fadeIn and fadeOut
duration:Number = 500, // milliseconds
ease:String = "Quint.easeOut",
display:String = "block", // only applicable to fadeIn, sets display property (i.e. inline-block, etc.)
mode:String = null, // options are "timeline" and "css3"
delay:Number = null, // milliseconds
callback:Function = null, // HTMLElement gets passed automatically as first argument
callbackParams:* = null // wildcard (can be anything)
Jacked.setEngines(overrides:Object);
Jacked.setEngines({

ios: false,
android: false,
winMobile: false,
firefox: false,
chrome: false,
safari: false,
opera: false,
ie: false

});
// true = CSS3 Transitions, false = requestAnimationFrame w/ setInterval fallback
Jacked.setEase(easing:String);
Jacked.setEase("Quad.easeOut"); // overrides the default ("Quint.easeOut") easing
Jacked.setDuration(num:Number);
Jacked.setDuration(750); // overrides the default duration (500)
Jacked.ready(callback:Function);
Jacked.ready(callback);
// function to be called when the window fully loads, because sometimes animations can wait..
Built-in Easing Options for both JS and CSS3
Linear.easeOut Quint.easeOut Quad.easeOut Quart.easeOut Circ.easeOut Sine.easeOut Expo.easeOut
Linear.easeIn Quint.easeIn Quad.easeIn Quart.easeIn Circ.easeIn Sine.easeIn Expo.easeIn
Linear.easeInOut Quint.easeInOut Quad.easeInOut Quart.easeInOut Circ.easeInOut Sine.easeInOut Expo.easeInOut
Linear.easeNone
Additional Helpers
Jacked.getMobile(); // returns "ipad", "iphone", "android", "msie" or null
Jacked.getBrowser(); // returns "chrome", "safari", "firefox", "opera", "ie" or null
Jacked.getIE(); // returns legacy IE status (less than IE9), true/false
Jacked.getEngine(); // returns engine status: true = running, false = not running
Static Methods
Jacked.tween(el:HTMLElement, to:Object, settings:Object = null);
Jacked.tween(element, {marginLeft: 100, width: 200}, settings);
Jacked.fadeIn(el:HTMLElement, settings:Object = null);
Jacked.fadeIn(element, settings);
Jacked.fadeOut(el:HTMLElement, settings:Object = null);
Jacked.fadeOut(element, settings);
Jacked.transform(el:HTMLElement, to:Object, settings:Object = null, fallback:Object = null);
click here for an example
Jacked.transform(element, {
transform: "rotateX(180deg) translate(50px, 50px)",
opacity: 1 // can be combined with traditional properties
},
settings, {
// fallback css for browsers where CSS3 transforms aren't supported
left: 50px,
top: 50px,
opacity: 1
});
Jacked.percentage(el:HTMLElement, Object(from:Object, to:Object), settings:Object = null);
// only percentage values are supported for this method - click here for an example
Jacked.percentage(element, {
// starting values
from: {
width: "20%",
height: "80%"
},
// ending values
to: {
width: "80%",
height: "20%"
},
}, settings);
Jacked.stopTween(el:HTMLElement, complete:Boolean = false, triggerCallback:Boolean = false);
Jacked.stopTween(element, true, true); // arguments optioned
Jacked.stopTween(element); // minimal call
Jacked.stopAll(completeAll:Boolean = false);
Jacked.stopAll(true); // stop all currently running tweens
Jacked.special(el:HTMLElement, settings:Object);
Special allows a user to execute their very own function for every "step" or "onUpdate" of a tween.
A good use of this function is to animate properties that aren't natively supported by Jacked.
// The settings argument for a "special" call has only 3 options:
// duration(optional), easing(optional) and callback(mandatory)
Jacked.special(element, {duration: 500, easing: "Quint.easeOut", callback: myFunction});

// sample callback
// The callback will be passed 3 arguments in the following order:
// (el:HTMLElement, tick:Number, finished:Boolean)
// tick = A number between 0-1 that represents the current tween position in the "tween"
// finished = A Boollean that will pass as true when the tween is finished (i.e. tick = 1)
function(element, tick, finished) {};
HTMLElement
document.getElementById("someElement").jacked(to:Object, settings:Object = null);
document.getElementById("someElement").jacked({marginLeft: 100, width: 200}, settings);
document.getElementById("someElement").fadeInJacked(settings:Object = null);
document.getElementById("someElement").fadeInJacked(settings);
document.getElementById("someElement").fadeOutJacked(settings:Object = null);
document.getElementById("someElement").fadeOutJacked(settings);
document.getElementById("someElement").transformJacked(to:Object, settings:Object = null, fallback:Object = null);
click here for an example
document.getElementById("someElement").transformJacked({
transform: "rotateX(180deg) translate(50px, 50px)",
opacity: 1 // can be combined with traditional properties
},
settings, {
// fallback css for browsers where CSS3 transforms aren't supported
left: 50px,
top: 50px,
opacity: 1
});
document.getElementById("someElement").percentage(Object(from:Object, to:Object), settings:Object = null);
// only percentage values are supported for this method - click here for an example
document.getElementById("someElement").percentage({
// starting values
from: {
width: "20%",
height: "80%"
},
// ending values
to: {
width: "80%",
height: "20%"
},
}, settings);
document.getElementById("someElement").stopJacked(complete:Boolean = false, triggerCallback:Boolean = false);
document.getElementById("someElement").stopJacked(true, true); // both arguments optioned
document.getElementById("someElement").stopJacked(); // minimal call
jQuery Plugin
$(element).jacked(to:Object, settings:Object = null);
$(element).jacked({marginLeft: 100, width: 200}, settings);
$(element).fadeInJacked(settings:Object = null);
$(element).fadeInJacked(settings);
$(element).fadeInJacked(); // minimal call
$(element).fadeOutJacked(settings:Object = null);
$(element).fadeOutJacked(settings);
$(element).fadeOutJacked(); // minimal call
$(element).transformJacked(to:Object, settings:Object = null, fallback:Object = null);
click here for an example
$(element).transformJacked({
transform: "rotateX(180deg) translate(50px, 50px)",
opacity: 1 // can be combined with traditional properties
},
settings, {
// fallback css for browsers where CSS3 transforms aren't supported
left: 50px,
top: 50px,
opacity: 1
});
$(element).percentage(Object(from:Object, to:Object), settings:Object = null);
// only percentage values are supported for this method - click here for an example
$(element).percentage({
// starting values
from: {
width: "20%",
height: "80%"
},
// ending values
to: {
width: "80%",
height: "20%"
},
}, settings);
$(element).stopJacked(complete:Boolean = false, triggerCallback:Boolean = false);
$(element).stopJacked(true, true); // both arguments optioned
$(element).stopJacked(); // minimal call
$(element).stopJackedSet(complete:Boolean = false);
Special call reserved for jQuery only
$(element).stopJackedSet(true);
// recursively stop tweens of all children and children's children of any given element
// Let's say you had two instances of a banner rotator, but only wanted to stop all tweens
// from one banner and not the other. This is where "stopJackedSet" is extremely useful.
Special Notes
Everything is Connected
This means you can combine a Static call with a jQuery call and stopAll() will stop it all.
And same goes for combining requestAnimationFrame with CSS3.
Automatic Overriding
When a tween occurs, it automatically overrides any existing tweens on the same element.
So although stop methods are available for Jacked, there's no need to explicitly call
them before you tween something.
Automatic jQuery Instantiation + jQuery Chaining
The jQuery plugin gets instantiated automatically if the jQuery Object is found.
And all jQuery calls return the jQuery Object for chaining.
IE8 Support
Because some assholes still use it.
backgroundPosition supported, with some exceptions
Animating numbers is supported. Animating positions and percentages are not. Click here for an example
The HTML source of the link above has more notes about working with backgroundPosition.
Support for CSS3 properties
Anything can be animated using Jacked.special(); (see static tab for more info), but other than
transforms, all other CSS3 properties such as "box-shadow", "border-radius", etc. are not supported
by the native Jacked.tween(); call.
Additional Notes
fadeIn and fadeOut work similar to jQuery. If the element's display is "none", when the tween starts
it will be set to "block", or its value can be explicitly set as one of the settings options (see
"settings"). Likewise, for fadeOut, when the element's opacity reaches zero its display will be set
to "none".

Visibility is automatically set to "visible" for every tween.

Jacked does not compute "auto" and will translate this value as the number zero.
Feedback Welcome!
If you decide to test Jacked and have a question or comment, feel free to email me at the address below!
support at codingjack dot com
Examples
More Examples Coming Soon!
CSS3 Transform Example

Animating background position

Animating percentages

Making use of Jacked.special();

SimpleSlider - A light, responsive slider built with Jacked