KUTE.js Core Engine Examples | Javascript Animation Engine

Core Engine

KUTE.js core engine can animate by itself a great deal of CSS properties as well as scroll. You can do it all with native Javascript or with jQuery, but before we head over to the more advanced examples, let's have a quick look at these two basic examples here. Note: the examples are posted on codepen.

Basic Native Javascript Example

When developing with native Javascript, a very basic syntax goes like this:

// this is the tween object, basically KUTE.method(element, from, to, options);
var tween = KUTE.fromTo('selector', {left: 0}, {left: 100}, {yoyo: true});

Now the tween object is created, it's a good time for you to know that via Native Javascript we always animate the first HTML element only, even if you're using a class selector. To create/control a tween for multiple elements such as querySelectorAll() or getElementsByTagName(), you need to do a for () loop, or make use of the two new methods: .allTo() or .allFromTo(). Now let's apply the tween control methods:

tween.start(); // starts the animation
tween.stop(); // stops current tween and all chained tweens animating
tween.pause(); // pauses current tween animation
tween.play(); // or tween.resume(); resumes current tween animation
tween.chain(tween2); // when tween animation finished, you can trigger the start of another tween
tween.playing // checks if the tween is currenlty active so we prevent start() when not needed
tween.paused // checks if the tween is currenlty active so we can prevent pausing or resume if needed

The demo for the above example is here.

Basic jQuery Example

KUTE.js includes a jQuery Plugin to help you easily implement KUTE.js in your jQuery applications. When using jQuery, the syntax is familiar but works a bit different than plain Javascript due to jQuery's specific code standards. Let's have a look:

// this is the tween object, basically $('selector').method(fromValues, toValue, options)
var tween = $('selector').fromTo({top: 20}, {top: 100}, {delay: 500});

We mentioned that the jQuery Plugin is different, and here's why: the above function call uses the allFromTo method to create an Array of objects for each HTML element of chosen selector, but if the selector only returns one element the call returns a single tween object built with fromTo method. For the array of objects we can now apply the exact same tween control methods, except these:

tween.length // check if the tween is an array of objects
tween.length && tween.tweens[0].playing && tween.tweens[tween.length-1].playing // now we know that one of the tweens is playing
tween.length && tween.tweens[0].paused && tween.tweens[tween.length-1].paused // now we know that one of the tweens is paused

The demo for the above example is here.

Transform Properties Examples

KUTE.js supports almost all about transform as described in the spec: the 2D translate, rotate, skewX, skewY and scale, as well as the 3D translateX, translateY, translateZ, translate3d, rotateX, rotateY, rotateZ properties. Additionally it allows you to set a perspective for the element or it's parent as well as a perpective-origin for the element or it's parent.

Translations

In the next example the first box is moving to left 250px with translate property, the second box is moving to the right by 200px using translateX and the third box is moving to the bottom using translate3d. The last box also uses translate3d but requires a perspective value for the animation on the Z axis to be effective.

var tween1 = KUTE.fromTo('selector1',{translate:0},{translate:-250}); // or translate:[x,y] for both axis
var tween2 = KUTE.fromTo('selector2',{translateX:0},{translateX:200});
var tween3 = KUTE.fromTo('selector3',{translate3d:[0,0,0]},{translate3d:[0,100,0]});
var tween4 = KUTE.fromTo('selector4',{translate3d:[0,0,0]},{translate3d:[0,0,-100]},{parentPerspective: 100});

And here is how it looks like:

Start

As you can see in your browsers console, for all animations translate3d is used, as explained in the features page. Also the first example that's using the 2D translate for both vertical and horizontal axis even if we only set X axis. You can download this example here.

Remember: stacking translate and translate3d together may not work and IE9 does not support perspective.

Rotations

Next we're gonna animate 4 elements with one axis each element. Unlike translations, KUTE.js does not support rotate3d.

var tween1 = KUTE.fromTo('selector1',{rotate:0},{rotate:-720});
var tween2 = KUTE.fromTo('selector2',{rotateX:0},{rotateX:200});
var tween3 = KUTE.fromTo('selector3',{rotateY:0},{rotateY:160},{perspective:100});
var tween4 = KUTE.fromTo('selector4',{rotateZ:0},{rotateZ:360});

And here is how it looks like:

Start

The rotateX and rotateY are 3D based rotations, so they require a perspective in order to make the browser render proper 3D layers, but in the example they animate different because only the second, Y axis, uses a perspective setting. The rotation on Z axis does not require a perspective. Unlike translations, you can stack all axis rotation for your animation, but we will see that in a later example. You can download this example here.

Skews

KUTE.js supports skewX and skewY so let's animate the two. Since they are 2D transformations, IE9 supports skews.

var tween1 = KUTE.fromTo('selector1',{skewX:0},{skewX:20});
var tween2 = KUTE.fromTo('selector2',{skewY:0},{skewY:45});

And here is how it looks like:

Start

You can download this example here.

Mixed Transformations

The current specification does not support animating different transform properties with multiple tween objects at the same time, you must stack them all together into a single object. See the example below:

var tween1 = KUTE.fromTo('selector1',{rotateX:0},{rotateX:20}).start();
var tween2 = KUTE.fromTo('selector1',{skewY:0},{skewY:45}).start();

If you check the test here, you will notice that only the skewY is going to work and no rotation. Now let's do this properly.

var tween1 = KUTE.fromTo(
  'selector1', // element
  {translateX:0, rotateX:0, rotateY:0, rotateZ:0}, // from
  {translateX:250, rotateX:360, rotateY:15, rotateZ:5}, // to
  {perspective:400, perspectiveOrigin: 'center top'} // transform options
);
var tween2 = KUTE.fromTo(
  'selector2', // element
  {translateX:0, rotateX:0, rotateY:0, rotateZ:0}, // from values
  {translateX:-250, rotateX:360, rotateY:15, rotateZ:5}, // to values
  {parentPerspective:400, parentPerspectiveOrigin: 'center top'} // transform options
);

Now you can see we are using the specific transform options, the first tween object uses these settings for an element and the second for its parent.

element perspective 400px

parent perspective 400px

Start

This example also shows the difference between an element's perspective and a parent's perspective. You can download the above example here.

Chained Transformations

KUTE.js has the ability to stack transform properties as they come in chained tweens because when we run animations one after another we are kinda expecting a certain degree of continuity. As explained before, the best solution is the .to() method because it has the ability to stack properties found in the element's inline styling, mostly from previous tween animation, and use them as start values for the next tween. It also transfers unchanged values to values end for that same reason. OK now, let's see a side by side comparison with 3 elements:

FROMTO

Start

What's this all about?

the first box uses a regular .fromTo() object, we are doing things normally, we would expect them to work properly but due to the nature of the transforms, this is what it does
the second box is also using .fromTo() object, but using proper values for all tweens at all times, so we fixed that glitch
and the last box uses the .to() method, and does the chaining easier for most properties, especially for transform

When coding transformation chains I would highly recommend:

keep the same order of the transform properties, best would be: translation, rotation, skew and scale; an example of the difference shown here for rotations and here for rotations and skew;
2D and 3D translations would work best in if you provide a value at all times; eg. translate:[x,y] and translate3d:[x,y,z]; for instance using translate:150 or translateX:150 would mean that all other axis are 0;
on larger amount of elements animating chains, the .fromTo() method is fastest, so you will have more work, but can potentially minimize or eliminate any syncronization issues that may occur, as explained in the features page;
download this example here.

Box Model Properties

KUTE.js core engine supports most used box model properties, and almost all the box model properties via the CSS Plugin, so the next example will only animate width, height, top and left.

var tween1 = KUTE.to('selector1',{width:200});
var tween2 = KUTE.to('selector1',{height:300});
var tween3 = KUTE.to('selector1',{left:250});
var tween4 = KUTE.to('selector1',{top:100});

We're gonna chain these tweens and start the animation. You can download this example here.

BOX MODEL

Start

TIP: the width and height properties used together can be great for scale animation fallback on images for legacy browsers.

Color Properties

The next example is about animating color properties. As for example, check these lines for reference. Additional color properties such as borderColor or borderLeftColor are supported via the CSS Plugin.

KUTE.to('selector1',{color:'rgb(0,66,99)'}).start();
KUTE.to('selector1',{backgroundColor:'#069'}).start();
KUTE.to('selector1',{backgroundColor:'turquoise'}).start(); // IE9+ only

Let's get some animation going. Download the example here.

Colors

Start

A quick reminder: you can also use RGB or RGBA, but the last one is not supported on IE8 and it will fallback to RGB.

Vertical Scrolling

Another property we can animate with KUTE.js is scrollTop. I works for both the window and any scrollable object. Quick example:

KUTE.to('selector',{scroll:450}).start(); // for a scrollable element
KUTE.to('window',{scroll:450}).start(); // for the window

The scroll animation could however be influenced by mouse hover effects, usually creating some really nasty bottlenecks, but you can always add some CSS to your page to prevent that:

/* prevent scroll bottlenecks */
body[data-tweening="scroll"],
body[data-tweening="scroll"] * { pointer-events: none !important; }

A working example would work like this. Scroll works with IE8+ and is a unitless property even if these scroll distances are measured in pixels.

Cross Browser Animation Example

Unlike the examples hosted on Codepen, most examples here should be supported on legacy browsers. The next example is going to explain more details about how to target browsers according to their supported properties, so stick around. So, if your target audience uses legacy browsers in a significant percent, check to have the proper polyfills and also make sure you target your browsers, here's a complete reference. Now we are ready:

Collect Information And Cache It

// grab an HTML element to build a tween object for it
var element = document.getElementById("myElement");

// check for IE legacy browsers
var isIE = (new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) != null) ? parseFloat( RegExp.$1 ) : false;
var isIE8 = isIE === 8;
var isIE9 = isIE === 9;


// most browsers have specific checks, so make sure
// you include all you need for your target audience

Define Properties And Options Objects

// create values and options objects
var startValues = {};
var endValues = {};
var options = {};

// here we define properties that are commonly supported
startValues.backgroundColor = 'rgba(255,214,38,1)'; endValues.backgroundColor = 'rgba(236,30,113,0.1)';

// here we define the properties according to the target browsers
if (isIE8) { // or any other browser that doesn"t support transforms
  startValues.left = 0;
  endValues.left = 250;
  // for IE we override color values
  startValues.backgroundColor = '#CDDC39';
  endValues.backgroundColor = '#ec1e71';
  // IE8 also doesn't support RGBA, we set to animate the opacity of the element
  startValues.opacity = 1;
  endValues.opacity = 0.2;
} else if (isIE9) { // or any other browser that only support 2d transforms
  startValues.translate = 0; // 2d translate on X axis
  endValues.translate = 250;
  startValues.rotate = -180; // 2d rotation on Z axis
  endValues.rotate = 0;
  startValues.scale = 1; // 2d scale
  endValues.scale = 1.5;
} else { // most modern browsers
  startValues.translate3d = [0,0,0]; //3d translation on X axis
  endValues.translate3d = [250,0,0];
  startValues.rotateZ = -180; // 3d rotation on Z axis
  endValues.rotateZ = 0;
  startValues.rotateX = -20; // 3d rotation on X axis
  endValues.rotateX = 0;
  startValues.scale = 1; // 2d scale
  endValues.scale = 1.5;
  options.perspective = 400; // 3d transform option
}

// common tween options
options.easing = "easingCubicOut";
options.duration = 2500;
options.yoyo = true;
options.repeat = 1;

Build Tween Object And Tween Controls

// the cached object
var myTween = KUTE.fromTo(element, startValues, endValues, options);

// trigger buttons
var startButton = document.getElementById('startButton'),
  stopButton = document.getElementById('stopButton'),
  playPauseButton = document.getElementById('playPauseButton');

// add handlers for the trigger buttons
startButton.addEventListener('click', function(e){
  e.preventDefault();
  if (!myTween.playing) { myTween.start(); } // only start the animation if hasn't started yet
}, false);
stopButton.addEventListener('click', function(e){
  e.preventDefault();
  if (myTween.playing) { myTween.stop(); } // only stop the animation if there is any
}, false);
playPauseButton.addEventListener('click', function(e){
  e.preventDefault();
  if (!myTween.paused && myTween.playing) {
    myTween.pause(); playPauseButton.innerHTML = 'Resume';
  } else {
    myTween.resume();
    playPauseButton.innerHTML = 'Pause';
  }
}, false);

Live Demo

Pause Start Stop

Let's explain this code a bit. KUTE.js gives you the internal variables myTween.playing and myTween.paused (both true/false) to help you easily manage the tween control methods all together as in this example here. As said before, KUTE.js version 0.9.5 doesn't stat animating by default, for all the examples on this page you have to start it yourself, unlike their versions hosted on Codepen.

Also please know that opacity animation only works on Internet Explorer 8 if the target element uses float: left/right, display: block or display: inline-block.

the START button will use the .start() method and the animation starts;
the STOP button will use the .stop() method and stops the animation; after this the, animation can only be started again
the PAUSE button will use the .pause() method and pauses the animation; this also changes the button's text and functionality;
the RESUME button will use the .resume() method and resumes the animation; this reverses the button's initial state;
make sure you work with the conditions properly when you want to pause an animation you MUST check both !myTween.playing and myTween.paused conditions because you could end up with errors.

Tween Object Collections

With KUTE.js 1.5.0 new tween object constructor methods were introduced, and they allow you to create a tween object for each element in a collection, a very handy way to ease and speed up the animation programing workflow. Let's have a little fun.

// a simple .to() for a collection of elements would look like this
var myMultiTween1 = KUTE.allTo('selector1',{translate:[0,150]});

// or a more complex .fromTo() example with the two new options
var myMultiTween2 = KUTE.allFromTo(
    'selector2',
    {translate:[0,0], rotate: 0},
    {translate:[0,150], rotate: 360},
    {transformOrigin: '10% 10%', offset: 200 }
);

And should looks like this:

Start

As you can see, we also used the new tween options offset and transformOrigin and they make it so much more easy.

Easing Functions

KUTE.js core engine comes with Robert Penner's easing functions, but it can also work with any other easing functions, including custom functions. In the example below the first box animation uses the linear easing function and the second will use another function you choose.

Linear

Select

easingSinusoidalIn
easingSinusoidalOut
easingSinusoidalInOut
easingQuadraticIn
easingQuadraticOut
easingQuadraticInOut
easingCubicIn
easingCubicOut
easingCubicInOut
easingQuarticIn
easingQuarticOut
easingQuarticInOut
easingQuinticIn
easingQuinticOut
easingQuinticInOut
easingCircularIn
easingCircularOut
easingCircularInOut
easingExponentialIn
easingExponentialOut
easingExponentialInOut
easingBackIn
easingBackOut
easingBackInOut
easingElasticIn
easingElasticOut
easingElasticInOut

Start

For more examples and info about the other easing functions, head over to the easing examples page.