Tween

Promises, milliseconds, common names for easing functions and simplified syntax.

Usage

import { ticker, tween } from './Tween.js';

ticker.start();

const data = {
    radius: 0
};

tween(data, { radius: 24, spring: 1.2, damping: 0.4 }, 1000, 'easeOutElastic', null, () => {
    console.log(data.radius);
});

Converting from GSAP 3

Single line:

import gsap from 'gsap';

// ...
gsap.to(headline, { opacity: 1, duration: 1, ease: 'none', delay: 0.3 });

import { tween } from './Tween.js';

// ...
tween(headline, { opacity: 1 }, 1000, 'linear', 300);

With complete callback:

import gsap from 'gsap';

// ...
gsap.to(headline, {
    opacity: 1,
    duration: 1,
    ease: 'none',
    delay: 0.3,
    onComplete: () => {
        // ...
    }
});

import { tween } from './Tween.js';

// ...
tween(headline, { opacity: 1 }, 1000, 'linear', 300, () => {
    // ...
});

With update callback:

import gsap from 'gsap';

// ...
gsap.to(headline, {
    opacity: 1,
    duration: 1,
    ease: 'none',
    delay: 0.3,
    onUpdate: () => {
        // ...
    }
});

import { tween } from './Tween.js';

// ...
tween(headline, { opacity: 1 }, 1000, 'linear', 300, null, () => {
    // ...
});

With complete and update callbacks:

import gsap from 'gsap';

// ...
gsap.to(headline, {
    opacity: 1,
    duration: 1,
    ease: 'none',
    delay: 0.3,
    onComplete: () => {
        // ...
    },
    onUpdate: () => {
        // ...
    }
});

import { tween } from './Tween.js';

// ...
tween(headline, { opacity: 1 }, 1000, 'linear', 300, () => {
    // complete
}, () => {
    // update
});

With start callback (use delayedCall instead for the delay):

import gsap from 'gsap';

// ...
gsap.to(headline, {
    opacity: 1,
    duration: 1,
    ease: 'none',
    delay: 0.3,
    onStart: () => {
        // ...
    }
});

import { delayedCall, tween } from './Tween.js';

// ...
delayedCall(300, () => {
    tween(headline, { opacity: 1 }, 1000, 'linear');
    // start
});

Exports

delayedCall

Defers a function by the specified duration.

import { delayedCall } from './Tween.js';

// ...
delayedCall(500, animateIn);
// or
delayedCall(500, () => animateIn(delay));
// or
timeout = delayedCall(500, () => animateIn(delay));

wait

Defers by the specified duration.

import { wait } from './Tween.js';

// ...
await wait(250);

defer

Defers to the next tick.

import { defer } from './Tween.js';

// ...
defer(resize);
// or
defer(() => resize());
// or
await defer();

tween

Tween that animates to the specified destination properties.

tween( target : Object, props : Object, duration : Number, ease : Ease, delay : Number, onComplete : Function, onUpdate : Function ) : Promise
// delay is optional
tween( target : Object, props : Object, duration : Number, ease : Ease, onComplete : Function, onUpdate : Function ) : Promise

See the Easing Functions Cheat Sheet for examples by name.

import { tween } from './Tween.js';

// ...
tween(data, { value: 0.3 }, 1000, 'linear');

import { tween } from './Tween.js';

// ...
tween(eyelid1, { scaleY: 1.5 }, 120, 'easeOutCubic', () => {
    tween(eyelid1, { scaleY: 0.01 }, 180, 'easeOutCubic');
});

import { tween } from './Tween.js';

// ...
await tween(eyelid1, { scaleY: 1.5 }, 120, 'easeOutCubic');
await tween(eyelid1, { scaleY: 0.01 }, 180, 'easeOutCubic');

import { tween } from './Tween.js';

// ...
tween(shader.uniforms.uAlpha, { value: 1 }, 1000, 'easeOutCubic');

import { tween } from './Tween.js';

const data = {
    start: 0,
    length: 0
};

tween(data, { length: 1 }, 1000, 'easeOutCubic', () => {
    tween(data, { start: 1 }, 1000, 'easeInOutCubic', () => {
        data.start = 0;
    }, () => {
        data.length = 1 - data.start;
    });
});

import { tween } from './Tween.js';

// ...
tween(this, { progress: e.percent }, 2000, 'easeInOutSine', null, () => {
    if (this.progress === 1) {
        // ...
    }
});

clearTween

Immediately clears all delayedCalls and tweens of the specified object.

import { clearTween, delayedCall } from './Tween.js';

// ...
delayedCall(500, animateIn);
clearTween(animateIn);

import { clearTween, delayedCall } from './Tween.js';

// ...
clearTween(timeout);
timeout = delayedCall(500, () => animateIn());

import { clearTween, tween } from './Tween.js';

// ...
tween(data, { value: 0.3 }, 1000, 'linear');
clearTween(data);

See also

• easing.js
• TweenJS
• tween.js
• Easing Functions Cheat Sheet