Caph

Namespace: ease

caph.animation. ease

Members

<static> backIn

Returns a back-in curve.

This curve is equivalent to "cubic-bezier(0.6, -0.28, 0.735, 0.045)". Refer to the cubic-bezier details in caph.animation.ease.cubicBezier.

The return value is an array consists of the representation of this curve and the timing function which is passed a current time argument and returns a time which is affected by that curve. The timing function argument and return value is from 0 to 1.

Since:
  • 2.0.0
See:
Example
new caph.animation.Transform(document.getElementById("id")).move(100, 0, 0, 2000, caph.animation.ease.backIn).start();

<static> backInOut

Returns a back-in-out curve.

This curve is equivalent to "cubic-bezier(0.68, -0.55, 0.265, 1.55)". Refer to the cubic-bezier details in caph.animation.ease.cubicBezier.

The return value is an array consists of the representation of this curve and the timing function which is passed a current time argument and returns a time which is affected by that curve. The timing function argument and return value is from 0 to 1.

Since:
  • 2.0.0
See:
Example
new caph.animation.Transform(document.getElementById("id")).move(100, 0, 0, 2000, caph.animation.ease.backInOut).start();

<static> backOut

Returns a back-out curve.

This curve is equivalent to "cubic-bezier(0.175, 0.885, 0.32, 1.275)". Refer to the cubic-bezier details in caph.animation.ease.cubicBezier.

The return value is an array consists of the representation of this curve and the timing function which is passed a current time argument and returns a time which is affected by that curve. The timing function argument and return value is from 0 to 1.

Since:
  • 2.0.0
See:
Example
new caph.animation.Transform(document.getElementById("id")).move(100, 0, 0, 2000, caph.animation.ease.backOut).start();

<static> bounceIn

Returns a bounce-in curve.

The return value is an array consists of the representation of this curve and the timing function which is passed a current time argument and returns a time which is affected by that curve. The timing function argument and return value is from 0 to 1.

Since:
  • 2.0.0
See:
Example
new caph.animation.Transform(document.getElementById("id")).move(100, 0, 0, 2000, caph.animation.ease.bounceIn).start();

<static> bounceInOut

Returns a bounce-in-out curve.

The return value is an array consists of the representation of this curve and the timing function which is passed a current time argument and returns a time which is affected by that curve. The timing function argument and return value is from 0 to 1.

Since:
  • 2.0.0
See:
Example
new caph.animation.Transform(document.getElementById("id")).move(100, 0, 0, 2000, caph.animation.ease.bounceInOut).start();

<static> bounceOut

Returns a bounce-out curve.

The return value is an array consists of the representation of this curve and the timing function which is passed a current time argument and returns a time which is affected by that curve. The timing function argument and return value is from 0 to 1.

Since:
  • 2.0.0
See:
Example
new caph.animation.Transform(document.getElementById("id")).move(100, 0, 0, 2000, caph.animation.ease.bounceOut).start();

<static> circIn

Returns a circ-in curve.

This curve is equivalent to "cubic-bezier(0.6, 0.04, 0.98, 0.335)". Refer to the cubic-bezier details in caph.animation.ease.cubicBezier.

The return value is an array consists of the representation of this curve and the timing function which is passed a current time argument and returns a time which is affected by that curve. The timing function argument and return value is from 0 to 1.

Since:
  • 2.0.0
See:
Example
new caph.animation.Transform(document.getElementById("id")).move(100, 0, 0, 2000, caph.animation.ease.circIn).start();

<static> circInOut

Returns a circ-in-out curve.

This curve is equivalent to "cubic-bezier(0.785, 0.135, 0.15, 0.86)". Refer to the cubic-bezier details in caph.animation.ease.cubicBezier.

The return value is an array consists of the representation of this curve and the timing function which is passed a current time argument and returns a time which is affected by that curve. The timing function argument and return value is from 0 to 1.

Since:
  • 2.0.0
See:
Example
new caph.animation.Transform(document.getElementById("id")).move(100, 0, 0, 2000, caph.animation.ease.circInOut).start();

<static> circOut

Returns a circ-out curve.

This curve is equivalent to "cubic-bezier(0.075, 0.82, 0.165, 1)". Refer to the cubic-bezier details in caph.animation.ease.cubicBezier.

The return value is an array consists of the representation of this curve and the timing function which is passed a current time argument and returns a time which is affected by that curve. The timing function argument and return value is from 0 to 1.

Since:
  • 2.0.0
See:
Example
new caph.animation.Transform(document.getElementById("id")).move(100, 0, 0, 2000, caph.animation.ease.circOut).start();

<static> cubicIn

Returns a cubic-in curve.

This curve is equivalent to "cubic-bezier(0.55, 0.055, 0.675, 0.19)". Refer to the cubic-bezier details in caph.animation.ease.cubicBezier.

The return value is an array consists of the representation of this curve and the timing function which is passed a current time argument and returns a time which is affected by that curve. The timing function argument and return value is from 0 to 1.

Since:
  • 2.0.0
See:
Example
new caph.animation.Transform(document.getElementById("id")).move(100, 0, 0, 2000, caph.animation.ease.cubicIn).start();

<static> cubicInOut

Returns a cubic-in-out curve.

This curve is equivalent to "cubic-bezier(0.645, 0.045, 0.355, 1)". Refer to the cubic-bezier details in caph.animation.ease.cubicBezier.

The return value is an array consists of the representation of this curve and the timing function which is passed a current time argument and returns a time which is affected by that curve. The timing function argument and return value is from 0 to 1.

Since:
  • 2.0.0
See:
Example
new caph.animation.Transform(document.getElementById("id")).move(100, 0, 0, 2000, caph.animation.ease.cubicInOut).start();

<static> cubicOut

Returns a cubic-out curve.

This curve is equivalent to "cubic-bezier(0.215, 0.61, 0.355, 1)". Refer to the cubic-bezier details in caph.animation.ease.cubicBezier.

The return value is an array consists of the representation of this curve and the timing function which is passed a current time argument and returns a time which is affected by that curve. The timing function argument and return value is from 0 to 1.

Since:
  • 2.0.0
See:
Example
new caph.animation.Transform(document.getElementById("id")).move(100, 0, 0, 2000, caph.animation.ease.cubicOut).start();

<static> ease

Returns an ease curve.

This curve is equivalent to "cubic-bezier(0.25, 0.1, 0.25, 1)". Refer to the cubic-bezier details in caph.animation.ease.cubicBezier.

The return value is an array consists of the representation of this curve and the timing function which is passed a current time argument and returns a time which is affected by that curve. The timing function argument and return value is from 0 to 1.

Since:
  • 2.0.0
See:
Example
new caph.animation.Transform(document.getElementById("id")).move(100, 0, 0, 2000, caph.animation.ease.ease).start();

<static> easeIn

Returns an ease-in curve.

This curve is equivalent to "cubic-bezier(0.42, 0, 1, 1)". Refer to the cubic-bezier details in caph.animation.ease.cubicBezier.

The return value is an array consists of the representation of this curve and the timing function which is passed a current time argument and returns a time which is affected by that curve. The timing function argument and return value is from 0 to 1.

Since:
  • 2.0.0
See:
Example
new caph.animation.Transform(document.getElementById("id")).move(100, 0, 0, 2000, caph.animation.ease.easeIn).start();

<static> easeInOut

Returns an ease-in-out curve.

This curve is equivalent to "cubic-bezier(0.42, 0, 0.58, 1)". Refer to the cubic-bezier details in caph.animation.ease.cubicBezier.

The return value is an array consists of the representation of this curve and the timing function which is passed a current time argument and returns a time which is affected by that curve. The timing function argument and return value is from 0 to 1.

Since:
  • 2.0.0
See:
Example
new caph.animation.Transform(document.getElementById("id")).move(100, 0, 0, 2000, caph.animation.ease.easeInOut).start();

<static> easeOut

Returns an ease-out curve.

This curve is equivalent to "cubic-bezier(0, 0, 0.58, 1)". Refer to the cubic-bezier details in caph.animation.ease.cubicBezier.

The return value is an array consists of the representation of this curve and the timing function which is passed a current time argument and returns a time which is affected by that curve. The timing function argument and return value is from 0 to 1.

Since:
  • 2.0.0
See:
Example
new caph.animation.Transform(document.getElementById("id")).move(100, 0, 0, 2000, caph.animation.ease.easeOut).start();

<static> elasticIn

Returns an elastic-in curve.

The return value is an array consists of the representation of this curve and the timing function which is passed a current time argument and returns a time which is affected by that curve. The timing function argument and return value is from 0 to 1.

Since:
  • 2.0.0
See:
Example
new caph.animation.Transform(document.getElementById("id")).move(100, 0, 0, 2000, caph.animation.ease.elasticIn).start();

<static> elasticInOut

Returns an elastic-in-out curve.

The return value is an array consists of the representation of this curve and the timing function which is passed a current time argument and returns a time which is affected by that curve. The timing function argument and return value is from 0 to 1.

Since:
  • 2.0.0
See:
Example
new caph.animation.Transform(document.getElementById("id")).move(100, 0, 0, 2000, caph.animation.ease.elasticInOut).start();

<static> elasticOut

Returns an elastic-out curve.

The return value is an array consists of the representation of this curve and the timing function which is passed a current time argument and returns a time which is affected by that curve. The timing function argument and return value is from 0 to 1.

Since:
  • 2.0.0
See:
Example
new caph.animation.Transform(document.getElementById("id")).move(100, 0, 0, 2000, caph.animation.ease.elasticOut).start();

<static> expoIn

Returns an expo-in curve.

This curve is equivalent to "cubic-bezier(0.95, 0.05, 0.795, 0.035)". Refer to the cubic-bezier details in caph.animation.ease.cubicBezier.

The return value is an array consists of the representation of this curve and the timing function which is passed a current time argument and returns a time which is affected by that curve. The timing function argument and return value is from 0 to 1.

Since:
  • 2.0.0
See:
Example
new caph.animation.Transform(document.getElementById("id")).move(100, 0, 0, 2000, caph.animation.ease.expoIn).start();

<static> expoInOut

Returns an expo-in-out curve.

This curve is equivalent to "cubic-bezier(1, 0, 0, 1)". Refer to the cubic-bezier details in caph.animation.ease.cubicBezier.

Since:
  • 2.0.0
See:
Example
new caph.animation.Transform(document.getElementById("id")).move(100, 0, 0, 2000, caph.animation.ease.expoInOut).start();

<static> expoOut

Returns an expo-out curve.

This curve is equivalent to "cubic-bezier(0.19, 1, 0.22, 1)". Refer to the cubic-bezier details in caph.animation.ease.cubicBezier.

The return value is an array consists of the representation of this curve and the timing function which is passed a current time argument and returns a time which is affected by that curve. The timing function argument and return value is from 0 to 1.

Since:
  • 2.0.0
See:
Example
new caph.animation.Transform(document.getElementById("id")).move(100, 0, 0, 2000, caph.animation.ease.expoOut).start();

<static> linear

Returns a linear curve which has same speed from start to end.

The return value is an array consists of two items. The first index value is the representation of this curve and the second index value is this timing function. The timing function argument and return value is from 0 to 1.

ex) ['linear', function(t) { return t; }]

Since:
  • 2.0.0
Example
new caph.animation.Transform(document.getElementById("id")).move(100, 0, 0, 2000, caph.animation.ease.linear).start();

<static> quadIn

Returns a quad-in curve.

This curve is equivalent to "cubic-bezier(0.55, 0.085, 0.68, 0.53)". Refer to the cubic-bezier details in caph.animation.ease.cubicBezier.

The return value is an array consists of the representation of this curve and the timing function which is passed a current time argument and returns a time which is affected by that curve. The timing function argument and return value is from 0 to 1.

Since:
  • 2.0.0
See:
Example
new caph.animation.Transform(document.getElementById("id")).move(100, 0, 0, 2000, caph.animation.ease.quadIn).start();

<static> quadInOut

Returns a quad-in-out curve.

This curve is equivalent to "cubic-bezier(0.455, 0.03, 0.515, 0.955)". Refer to the cubic-bezier details in caph.animation.ease.cubicBezier.

The return value is an array consists of the representation of this curve and the timing function which is passed a current time argument and returns a time which is affected by that curve. The timing function argument and return value is from 0 to 1.

Since:
  • 2.0.0
See:
Example
new caph.animation.Transform(document.getElementById("id")).move(100, 0, 0, 2000, caph.animation.ease.quadInOut).start();

<static> quadOut

Returns a quad-out curve.

This curve is equivalent to "cubic-bezier(0.25, 0.46, 0.45, 0.94)". Refer to the cubic-bezier details in caph.animation.ease.cubicBezier.

The return value is an array consists of the representation of this curve and the timing function which is passed a current time argument and returns a time which is affected by that curve. The timing function argument and return value is from 0 to 1.

Since:
  • 2.0.0
See:
Example
new caph.animation.Transform(document.getElementById("id")).move(100, 0, 0, 2000, caph.animation.ease.quadOut).start();

<static> quartIn

Returns a quart-in curve.

This curve is equivalent to "cubic-bezier(0.895, 0.03, 0.685, 0.22)". Refer to the cubic-bezier details in caph.animation.ease.cubicBezier.

The return value is an array consists of the representation of this curve and the timing function which is passed a current time argument and returns a time which is affected by that curve. The timing function argument and return value is from 0 to 1.

Since:
  • 2.0.0
See:
Example
new caph.animation.Transform(document.getElementById("id")).move(100, 0, 0, 2000, caph.animation.ease.quartIn).start();

<static> quartInOut

Returns a quart-in-out curve.

This curve is equivalent to "cubic-bezier(0.77, 0, 0.175, 1)". Refer to the cubic-bezier details in caph.animation.ease.cubicBezier.

The return value is an array consists of the representation of this curve and the timing function which is passed a current time argument and returns a time which is affected by that curve. The timing function argument and return value is from 0 to 1.

Since:
  • 2.0.0
See:
Example
new caph.animation.Transform(document.getElementById("id")).move(100, 0, 0, 2000, caph.animation.ease.quartInOut).start();

<static> quartOut

Returns a quart-out curve.

This curve is equivalent to "cubic-bezier(0.165, 0.84, 0.44, 1)". Refer to the cubic-bezier details in caph.animation.ease.cubicBezier.

The return value is an array consists of the representation of this curve and the timing function which is passed a current time argument and returns a time which is affected by that curve. The timing function argument and return value is from 0 to 1.

Since:
  • 2.0.0
See:
Example
new caph.animation.Transform(document.getElementById("id")).move(100, 0, 0, 2000, caph.animation.ease.quartOut).start();

<static> quintIn

Returns a quint-in curve.

This curve is equivalent to "cubic-bezier(0.755, 0.05, 0.855, 0.06)". Refer to the cubic-bezier details in caph.animation.ease.cubicBezier.

The return value is an array consists of the representation of this curve and the timing function which is passed a current time argument and returns a time which is affected by that curve. The timing function argument and return value is from 0 to 1.

Since:
  • 2.0.0
See:
Example
new caph.animation.Transform(document.getElementById("id")).move(100, 0, 0, 2000, caph.animation.ease.quintIn).start();

<static> quintInOut

Returns a quint-in-out curve.

This curve is equivalent to "cubic-bezier(0.86, 0, 0.07, 1)". Refer to the cubic-bezier details in caph.animation.ease.cubicBezier.

The return value is an array consists of the representation of this curve and the timing function which is passed a current time argument and returns a time which is affected by that curve. The timing function argument and return value is from 0 to 1.

Since:
  • 2.0.0
See:
Example
new caph.animation.Transform(document.getElementById("id")).move(100, 0, 0, 2000, caph.animation.ease.quintInOut).start();

<static> quintOut

Returns a quint-out curve.

This curve is equivalent to "cubic-bezier(0.23, 1, 0.32, 1)". Refer to the cubic-bezier details in caph.animation.ease.cubicBezier.

The return value is an array consists of the representation of this curve and the timing function which is passed a current time argument and returns a time which is affected by that curve. The timing function argument and return value is from 0 to 1.

Since:
  • 2.0.0
See:
Example
new caph.animation.Transform(document.getElementById("id")).move(100, 0, 0, 2000, caph.animation.ease.quintOut).start();

<static> sineIn

Returns a sine-in curve.

This curve is equivalent to "cubic-bezier(0.47, 0, 0.745, 0.715)". Refer to the cubic-bezier details in caph.animation.ease.cubicBezier.

The return value is an array consists of the representation of this curve and the timing function which is passed a current time argument and returns a time which is affected by that curve. The timing function argument and return value is from 0 to 1.

Since:
  • 2.0.0
See:
Example
new caph.animation.Transform(document.getElementById("id")).move(100, 0, 0, 2000, sineIn).start();

<static> sineInOut

Returns a sine-in-out curve.

This curve is equivalent to "cubic-bezier(0.445, 0.05, 0.55, 0.95)". Refer to the cubic-bezier details in caph.animation.ease.cubicBezier.

The return value is an array consists of the representation of this curve and the timing function which is passed a current time argument and returns a time which is affected by that curve. The timing function argument and return value is from 0 to 1.

Since:
  • 2.0.0
See:
Example
new caph.animation.Transform(document.getElementById("id")).move(100, 0, 0, 2000, caph.animation.ease.sineInOut).start();

<static> sineOut

Returns a sine-out curve.

This curve is equivalent to "cubic-bezier(0.39, 0.575, 0.565, 1)". Refer to the cubic-bezier details in caph.animation.ease.cubicBezier.

The return value is an array consists of the representation of this curve and the timing function which is passed a current time argument and returns a time which is affected by that curve. The timing function argument and return value is from 0 to 1.

Since:
  • 2.0.0
See:
Example
new caph.animation.Transform(document.getElementById("id")).move(100, 0, 0, 2000, caph.animation.ease.sineOut).start();

Methods

<static> add(name, fn) → {caph.animation.ease}

Adds a custom curve.

Parameters:
Name Type Description
name String

The representation of curve.
fn function

The custom timing function.

This function is passed a current time parameter and returns a calculated time value. The timing function argument and return value is from 0 to 1.
Since:
  • 2.0.0
Returns:

This ease object.

Type
caph.animation.ease
Example
caph.animation.ease.add(
     'bounceOut',
     function (t) {
         if (t < 1 / 2.75) {
             return (7.5625 * t * t);
         } else if (t < 2 / 2.75) {
             return (7.5625 * (t -= 1.5 / 2.75) * t + 0.75);
         } else if (t < 2.5 / 2.75) {
             return (7.5625 * (t -= 2.25 / 2.75) * t + 0.9375);
         } else {
             return (7.5625 * (t -= 2.625 / 2.75) * t + 0.984375);
         }
     }
 );

<static> cubicBezier(x1, y1, x2, y2) → {Array}

Defines a custom cubic bezier curve.

Parameters:
Name Type Description
x1 Number

A x-axis value (from 0 to 1) of point 1.
y1 Number

A y-axis value (from 0 to 1) of point 1.
x2 Number

A x-axis value (from 0 to 1) of point 2.
y2 Number

A y-axis value (from 0 to 1) of point 2.
Since:
  • 2.0.0
See:
Returns:

An array consists of two items.

The first index value is the representation of this curve and the second index value is this timing function. The timing function argument and return value is from 0 to 1.

ex) ['cubic-bezier(x1, y1, x2, y2)', function(t) { ... return t2; }]

Type
Array
Example
new caph.animation.Transform(document.getElementById("id")).move(100, 0, 0, 2000, caph.animation.ease.cubicBezier(0.25, 0.1, 0.25, 1)).start();

<static> match(name) → {Array}

Returns a matched curve by the given name. The given name can be both spinal and camel case.

Parameters:
Name Type Description
name String

The representation of curve.
Since:
  • 2.0.0
Returns:

An array consists of the representation of this curve and the timing function which is passed a current time argument and returns a time which is affected by that curve. The timing function argument and return value is from 0 to 1.

Type
Array
Example
var easeIn = caph.animation.ease.match('ease-in'); // It is equivalent to caph.animation.ease.match('easeIn') and returns an array representing "ease-in" curve. The return value is equal to caph.animation.ease.easeIn.

<static> normalize(ease) → {Array}

Returns a normalized curve. If there is no corresponding curve, returns a linear curve.

Parameters:
Name Type Description
ease String | function | Array

A representation of curve or a custom timing function or an array which consists of representation of curve and timing function.
Since:
  • 2.0.0
Returns:

An array consists of the representation of this curve and the timing function which is passed a current time argument and returns a time which is affected by that curve. The timing function argument and return value is from 0 to 1.

Type
Array
Example
var linear = caph.animation.ease.normalize('not exist ease function');
 var easeIn = caph.animation.ease.normalize('ease-in');
 var easeOut = caph.animation.ease.normalize('cubic-bezier(0, 0, 0.58, 1)');
 var bounceOut = caph.animation.ease.normalize(function (t) {
     if (t < 1 / 2.75) {
         return (7.5625 * t * t);
     } else if (t < 2 / 2.75) {
         return (7.5625 * (t -= 1.5 / 2.75) * t + 0.75);
     } else if (t < 2.5 / 2.75) {
         return (7.5625 * (t -= 2.25 / 2.75) * t + 0.9375);
     } else {
         return (7.5625 * (t -= 2.625 / 2.75) * t + 0.984375);
     }
 });