Caph Class: Transform

new Transform(element)

A class which provides simple animations such as rotate, move, scale and opacity using CSS3 transform.

Parameters:

Name	Type	Description
`element`	HTMLElement	HTMLElement in the DOM.

Since:

2.0.0

Example

new caph.animation.Transform(document.getElementById('id')).move(200, 0, 0, 300, 'ease-in').delay(100).move(-200, 0, 0, 300, 'ease-out').start();

Methods

callback(callback, async) → {caph.core.Transform}

Adds a callback function.

Parameters:

Name	Type	Argument	Description
`callback`	function		A callback function.
`async`	Boolean	<optional>	A boolean indicates whether to call function asynchronously or not. Default value is false.

Since:

2.0.0

Returns:

Type: caph.core.Transform

Example

new caph.animation.Transform(document.getElementById('id')).move(100, 0, 0).callback(function() {
     console.log("callback");
 }).start();

clear() → {caph.animation.Transform}

Clears the entire added transitions.

Since:

2.0.0

Returns:

Type: caph.animation.Transform

Example

var transform = new caph.animation.Transform(document.getElementById('id')).move(100, 0, 0, 5000).start();
 
 // do something...
 
 transform.clear();

delay(delay) → {caph.core.Transform}

Sets the transition delay time.

Parameters:

Name	Type	Description
`delay`	Number	A millisecond indicates when the effect will start.

Since:

2.0.0

Returns:

Type: caph.core.Transform

Example

new caph.animation.Transform(document.getElementById('id')).delay(500).move(100, 0, 0).start();

move(x, y, z, duration, ease, opacity) → {caph.animation.Transform}

Moves the element.

Parameters:

Name	Type	Argument	Description
`x`	Number		A x-coordinate. (px)
`y`	Number		A y-coordinate. (px)
`z`	Number		A z-coordinate. (px)
`duration`	Number	<optional>	A number indicates how many times an effect takes to complete.
`ease`	String \| function \| Array	<optional>	A representation of curve or a custom timing function or an array which consists of representation of curve and timing function. The "caph.animation.ease" provides frequently used curves such as ease-in, ease-out, ease-in-out and so on.
`opacity`	Number \| function	<optional>	An opacity to apply during transition. This is an integer from 0 to 1, or a function which is passed a current time argument and returns a opacity for that time. The "caph.animation.transition" provides several opacity functions such as flicker, fade-in-out-in and fade-out-in-out.

Since:

2.0.0

Returns:

Type: caph.animation.Transform

Example

new caph.animation.Transform(document.getElementById('id')).move(100, 0, 0, 1000).move(0, 100, 0, 1000, 'ease-in').move(0, 0, 100, 1000, caph.animation.ease.easeOut, 0.5).start();

opacity(opacity, duration, ease) → {caph.animation.Transform}

Sets opacity to the element.

Parameters:

Name	Type	Argument	Description
`opacity`	Number \| function		A value of opacity. This is an integer from 0 to 1, or a function which is passed a current time argument and returns a opacity for that time. The "caph.animation.transition" provides several opacity functions such as flicker, fade-in-out-in and fade-out-in-out.
`duration`	Number	<optional>	A number indicates how many times an effect takes to complete.
`ease`	String \| function \| Array	<optional>	A representation of curve or a custom timing function or an array which consists of representation of curve and timing function. The "caph.animation.ease" provides frequently used curves such as ease-in, ease-out, ease-in-out and so on.

Since:

2.0.0

Returns:

Type: caph.animation.Transform

Example

new caph.animation.Transform(document.getElementById('id')).opacity(0, 1000).opacity(
     function(p) {
         return 1 * p;
     }, 
 1000).start()

resume() → {caph.animation.Transform}

Resumes the transform.

Since:

2.0.0

Returns:

Type: caph.animation.Transform

Example

var transform = new caph.animation.Transform(document.getElementById('id')).move(100, 0, 0, 5000).start();
 
 // do something...
 
 transform.stop();
 
 // do something...
 
 transform.resume();

rotate(x, y, z, duration, ease, opacity) → {caph.animation.Transform}

Rotates the element.

Parameters:

Name	Type	Argument	Description
`x`	Number		A degree of x-axis.
`y`	Number		A degree of y-axis.
`z`	Number		A degree of z-axis.
`duration`	Number	<optional>	A number indicates how many times an effect takes to complete.
`ease`	String \| function \| Array	<optional>	A representation of curve or a custom timing function or an array which consists of representation of curve and timing function. The "caph.animation.ease" provides frequently used curves such as ease-in, ease-out, ease-in-out and so on.
`opacity`	Number \| function	<optional>	An opacity to apply during transition. This is an integer from 0 to 1, or a function which is passed a current time argument and returns a opacity for that time. The "caph.animation.transition" provides several opacity functions such as flicker, fade-in-out-in and fade-out-in-out.

Since:

2.0.0

Returns:

Type: caph.animation.Transform

Example

new caph.animation.Transform(document.getElementById('id')).rotate(90, 0, 0, 1000).rotate(0, 90, 0, 1000, 'ease-in').rotate(0, 0, 90, 1000, caph.animation.ease.easeOut, 0.5).start();

rotateAxis(x, y, z, degree, duration, ease, opacity) → {caph.animation.Transform}

Rotates element by axis.

Parameters:

Name	Type	Argument	Description
`x`	Number		A value of x-axis.
`y`	Number		A value of y-axis.
`z`	Number		A value of z-axis.
`degree`	Number		A degree to rotate.
`duration`	Number	<optional>	A number indicates how many times an effect takes to complete.
`ease`	String \| function \| Array	<optional>	A representation of curve or a custom timing function or an array which consists of representation of curve and timing function. The "caph.animation.ease" provides frequently used curves such as ease-in, ease-out, ease-in-out and so on.
`opacity`	Number \| function	<optional>	An opacity to apply during transition. This is an integer from 0 to 1, or a function which is passed a current time argument and returns a opacity for that time. The "caph.animation.transition" provides several opacity functions such as flicker, fade-in-out-in and fade-out-in-out.

Since:

2.0.0

Returns:

Type: caph.animation.Transform

Example

new caph.animation.Transform(document.getElementById('id')).rotateAxis(1, 0, 0, 90, 1000).rotateAxis(0, 1, 0, 90, 1000, 'ease-in').rotateAxis(0, 0, 1, 90, 1000, caph.animation.ease.easeOut, 0.5).start();

rotateX(degree, duration, ease, opacity) → {caph.animation.Transform}

Rotates element by x-axis.

Parameters:

Name	Type	Argument	Description
`degree`	Number		A degree of x-axis.
`duration`	Number	<optional>	A number indicates how many times an effect takes to complete.
`ease`	String \| function \| Array	<optional>	A representation of curve or a custom timing function or an array which consists of representation of curve and timing function. The "caph.animation.ease" provides frequently used curves such as ease-in, ease-out, ease-in-out and so on.
`opacity`	Number \| function	<optional>	An opacity to apply during transition. This is an integer from 0 to 1, or a function which is passed a current time argument and returns a opacity for that time. The "caph.animation.transition" provides several opacity functions such as flicker, fade-in-out-in and fade-out-in-out.

Since:

2.0.0

Returns:

Type: caph.animation.Transform

Example

new caph.animation.Transform(document.getElementById('id')).rotateX(90, 1000).rotateX(-90, 1000, 'ease-in').rotateX(90, 1000, caph.animation.ease.easeOut, 0.5).start();

rotateY(degree, duration, ease, opacity) → {caph.animation.Transform}

Rotates element by y-axis.

Parameters:

Name	Type	Argument	Description
`degree`	Number		A degree of y-axis.
`duration`	Number	<optional>	A number indicates how many times an effect takes to complete.
`ease`	String \| function \| Array	<optional>	A representation of curve or a custom timing function or an array which consists of representation of curve and timing function. The "caph.animation.ease" provides frequently used curves such as ease-in, ease-out, ease-in-out and so on.
`opacity`	Number \| function	<optional>	An opacity to apply during transition. This is an integer from 0 to 1, or a function which is passed a current time argument and returns a opacity for that time. The "caph.animation.transition" provides several opacity functions such as flicker, fade-in-out-in and fade-out-in-out.

Since:

2.0.0

Returns:

Type: caph.animation.Transform

Example

new caph.animation.Transform(document.getElementById('id')).rotateY(90, 1000).rotateY(-90, 1000, 'ease-in').rotateY(90, 1000, caph.animation.ease.easeOut, 0.5).start();

rotateZ(degree, duration, ease, opacity) → {caph.animation.Transform}

Rotates element by z-axis.

Parameters:

Name	Type	Argument	Description
`degree`	Number		A degree of z-axis.
`duration`	Number	<optional>	A number indicates how many times an effect takes to complete.
`ease`	String \| function \| Array	<optional>	A representation of curve or a custom timing function or an array which consists of representation of curve and timing function. The "caph.animation.ease" provides frequently used curves such as ease-in, ease-out, ease-in-out and so on.
`opacity`	Number \| function	<optional>	An opacity to apply during transition. This is an integer from 0 to 1, or a function which is passed a current time argument and returns a opacity for that time. The "caph.animation.transition" provides several opacity functions such as flicker, fade-in-out-in and fade-out-in-out.

Since:

2.0.0

Returns:

Type: caph.animation.Transform

Example

new caph.animation.Transform(document.getElementById('id')).rotateZ(90, 1000).rotateZ(-90, 1000, 'ease-in').rotateZ(90, 1000, caph.animation.ease.easeOut, 0.5).start();

scale(x, y, z, duration, ease, opacity) → {caph.animation.Transform}

Scales the element.

Parameters:

Name	Type	Argument	Description
`x`	Number		A value of x scale.
`y`	Number		A value of y scale.
`z`	Number		A value of z scale.
`duration`	Number	<optional>	A number indicates how many times an effect takes to complete.
`ease`	String \| function \| Array	<optional>	A representation of curve or a custom timing function or an array which consists of representation of curve and timing function. The "caph.animation.ease" provides frequently used curves such as ease-in, ease-out, ease-in-out and so on.
`opacity`	Number \| function	<optional>	An opacity to apply during transition. This is an integer from 0 to 1, or a function which is passed a current time argument and returns a opacity for that time. The "caph.animation.transition" provides several opacity functions such as flicker, fade-in-out-in and fade-out-in-out.

Since:

2.0.0

Returns:

Type: caph.animation.Transform

Example

new caph.animation.Transform(document.getElementById('id')).scale(1.5, 0, 0, 1000).scale(0, 1.5, 0, 1000, 'ease-in').scale(0, 0, 1.5, 1000, caph.animation.ease.easeOut, 0.5).start();

set() → {caph.core.Transform}

Sets the final transition result instantly. Ignores the delay, duration and ease option.

Since:

2.0.0

Returns:

Type: caph.core.Transform

Example

new caph.animation.Transform(document.getElementById('id')).rotate(90, 0, 0).set();

setDuration(duration) → {caph.animation.Transform}

Sets the transition duration.

Parameters:

Name	Type	Description
`duration`	Number	A millisecond indicates how many times an effect takes to complete.

Since:

2.0.0

Returns:

Type: caph.animation.Transform

Example

new caph.animation.Transform(document.getElementById('id')).setDuration(2000).move(200, 0, 0).start();

setEase(ease) → {caph.animation.Transform}

Sets the speed curve of the transition effect.

Parameters:

Name	Type	Description
`ease`	function \| Array	A function which is passed a current time argument and returns a time which is affected by that curve. The "caph.animation.ease" provides frequently used curves such as ease-in, ease-out, ease-in-out and so on. It returns an array which consists of two items. The first index of array is the representation of curve and the second index of array is timing function.

Since:

2.0.0

Returns:

Type: caph.animation.Transform

Example

new caph.animation.Transform(document.getElementById('id')).setEase(caph.animation.ease.easeInOut).move(200, 0, 0, 300).start();

setMultiply(multiply) → {caph.animation.Transform}

Determines whether transition is multiplied or not. If true, next transition is started from previous transition status.

Parameters:

Name	Type	Description
`multiply`	Boolean	A boolean indicating whether transition is multiplied or not.

Since:

2.0.0

Returns:

Type: caph.animation.Transform

Example

new caph.animation.Transform(document.getElementById('id')).setMultiply(false).move(200, 0, 0, 300, 'ease-in').delay(100).move(-200, 0, 0, 300, 'ease-out').start();

setOpacity(opacity) → {caph.animation.Transform}

Sets the opacity to apply during transition.

Parameters:

Name	Type	Description
`opacity`	Number \| function	An integer indicates the opacity. This option also can be a function which is passed a current time argument and returns a opacity for that time. The "caph.animation.transition" provides several opacity functions such as flicker, fade-in-out-in and fade-out-in-out.

Since:

2.0.0

Returns:

Type: caph.animation.Transform

Example

new caph.animation.Transform(document.getElementById('id')).setOpacity(0.1).move(200, 0, 0, 300).start();

skewXY(x, y, duration, ease, opacity) → {caph.animation.Transform}

Skews the element along the X and Y axis.

Parameters:

Name	Type	Argument	Description
`x`	Number		A degree of x-axis.
`y`	Number		A degree of y-axis.
`duration`	Number	<optional>	A number indicates how many times an effect takes to complete.
`ease`	String \| function \| Array	<optional>	A representation of curve or a custom timing function or an array which consists of representation of curve and timing function. The "caph.animation.ease" provides frequently used curves such as ease-in, ease-out, ease-in-out and so on.
`opacity`	Number \| function	<optional>	An opacity to apply during transition. This is an integer from 0 to 1, or a function which is passed a current time argument and returns a opacity for that time. The "caph.animation.transition" provides several opacity functions such as flicker, fade-in-out-in and fade-out-in-out.

Returns:

Type: caph.animation.Transform

Example

new caph.animation.Transform(document.getElementById('id')).skewXY(30, 0, 1000).skewXY(-30, 0, 1000, 'ease-in').skewXY(0 30, 1000, caph.animation.ease.easeOut, 0.5).start();

start(repeat) → {caph.animation.Transform}

Starts the transform.

Parameters:

Name	Type	Argument	Description
`repeat`	Number	<optional>	A number indicates how many times repeat the transform. Default value is 1. If the repeat value is "caph.animation.Player.INFINITE", repeats infinitely.

Since:

2.0.0

Returns:

Type: caph.animation.Transform

Example

new caph.animation.Transform(document.getElementById('id1')).move(100, 0, 0, 1000).start();
 new caph.animation.Transform(document.getElementById('id2')).rotate(360, 0, 0, 1000).start(caph.animation.Player.INFINITE);
 new caph.animation.Transform(document.getElementById('id3')).scale(1.5, 1.5, 0, 1000).start(5);

stop() → {caph.animation.Transform}

Stops the transform.

Since:

2.0.0

Returns:

Type: caph.animation.Transform

Example

var transform = new caph.animation.Transform(document.getElementById('id')).move(100, 0, 0, 5000).start();
 
 // do something...
 
 transform.stop();