Interface

Overview

The Interface Functions are tools that allow you to create tween objects or collections of them and are designed to speed up the animation workflow. The functions call the tween class version that you choose to use, so you don't have to worry about details like who can do what or which class is compatible to which.

Some functions use specific internal options to change the behavior of the value processing, or make use of the tweenCollection class for collections of targets, with specific options.

In the official build as well as your own custom builds, the order of the classes imported into an index.js file is important to enable the functionality of each Interface Function explained below.

Single Tween Object

As the heading suggests, the following two methods allow you to create tween objects for individual HTML elements.

.to() interface function is the most simple method which allows you to create tween objects for animating CSS properties from a specific default value OR from current/computed value TO a desired value. It's performance is not the same as for the other method as it has to compute the default/current value on tween .start() and thus delays the animation for a couple of milliseconds; still this feature is great for simple animations AND it has the ability to stack transform properties as they go, making smooth transform animations on chained tweens.

Considering a given div element is already transparent, a super quick example would be:

KUTE.to('#selector',{opacity:1}).start()

As you might have guessed, this method is useful for creating simple animations such as for scroll, hide/reveal elements, or generally when you don't know the current value of the property you are trying to animate.

.fromTo() method is the best way to build animations for BEST performance and absolute control. The tests prove this method to be the fastest method but unlike the .to() method, it does not stack transform properties on chained tweens. Along with the performance advantage, you can set measurement units for both starting and end values, to avoid glitches. Here's a quick example:

KUTE.fromTo('#selector',{opacity:1},{opacity:0}).start()

Tween Object Collections

The two interface functions allow you to create animations for multiple HTML elements at the same time, all in a single line of code. They use the Tween Collection class to create a tween object for each element of the collection and also enable the tween control methods in this new context.

.allTo() method allows you to create an array of tween objects for a collection of elements. This method is using the above .to() method and inherits it's functionality. Considering a given collection myDivs elements, a nice example would be:

// on the fly, grab the elements by className,
// do the tween objects array, and start kicking
KUTE.allTo( '.my-div-class', {opacity:1}, {offset: 200, duration: 500} ).start();

// or we cache the objects for better performance and / or later control
var myDivs          = document.querySelectorAll('.my-div-class');
var myDivsTweens    = KUTE.allTo( myDivs, {opacity:1}, {offset: 200, duration: 500} );

.allFromTo() interface function is also a method to animate a collection of elements and it uses the .fromTo() method. Quick example:

KUTE.allFromTo( myDivs, {opacity:1}, {opacity:0}, {offset: 200, duration: 500} ).start()

As you can see the above code, these methods have a specific tween option called offset that allows you to set a delay in milliseconds between the starting time of each tween animation. Most tween control methods apply to both methods, except for the .chain() method. In order to chain another tween to one of the myDivsTweens objects, we would need to access it from the array, but let's leave that for later.