Animate

Smoothly transition attribute or property values

While CSS animation is typically preferred for supported transitions, sometimes JavaScript is necessary for tweening certain attributes or properties. Wee gives you the bare minimum to make that happen.

addEasing

Add additional easing function(s)

VariableTypeDefaultDescriptionRequired

a

object, string

-

Multiple ease object or easing key

b

function

-

Easing function

Single

Wee.animate.addEasing('split', function(t) {
    return t / 2;
});

Multiple

Wee.animate.addEasing({
    split: function(t) {
        return t / 2;
    },
    slow: function(t) {
        return t < 1 ? 1 : (t / 3);
    }
});

Tween

Transition an attribute or property value

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

props

object

-

Key/value object of attributes or properties

options

object

-

Object parameters below

Options Object

VariableTypeDefaultDescriptionRequired

complete

function

-

Callback function

duration

number

400

Transition duration in milliseconds

ease

string

'ease'

ease, linear, or name of registered easing

Simple

Wee.animate.tween('ref:element', {
    height: 200
});

Advanced

Wee.animate.tween('ref:element', {
    height: 200,
    marginTop: 100
}, {
    duration: 500,
    ease: 'linear',
    complete: function() {
        // Complete logic
    }
});

If no unit is provided then pixel values will be assumed when tweening CSS attributes.