Created on September 03, 2019, Last modified on May 19, 2022

These attributes define the general behaviour of the animation while the actions-attribute defines what happens.

durationFloat0Duration in seconds of the transition from start to end
delayFloat0Delay in seconds before transition starts
timingFunctionString'ease'The timing function (See below)

timingFunction settings:

linearStraight point to point animation.
easeTransition starts at a constant speed and ends slowing down.
ease-inTransition starts slow and continues in a constant speed.
ease-outTransition starts at a constant speed and ends slowing down.
ease-in-outTransition starts slow, continues at a constant speed, and ends slowing down.
step-startTransition steps to start position.
step-endTransition steps to end position.
cubic-bezier(a,b,c,d)Custom bezier curve.

These behave identical to CSS timing function.

See all options in action at

Live demo

Below an example of what the various timingFunction states look like in action. By pressing left or right, you can see the differences between the linear, ease, ease-in, ease-out, ease-in-out, step-start, and step-end states.

class BasicUsageExample extends lng.Application {
    static _template() {
        return {
            ExamplanationText:{ x: 50, y: 28, text:{ text: 'Press left or right to swap transitions.', fontSize: 22, wordWrap: true, wordWrapWidth: 450, lineHeight: 30 }},
            LilLightning:{ x: 100, y: 50, src: '/Lightning/img/LngDocs_LilLightningIdle.png'}
        if(this._index > 0){
            this._index --;
            this._currentTransition = this._transitions[this._index];
        if(this._index < 6){
            this._index ++;
            this._currentTransition = this._transitions[this._index];
        this.tag('ExamplanationText').patch({ text:{ text: `This is the "${this._currentTransition}" transition.` }});
        this.tag("LilLightning").patch({ x: 100 }); // Reset to start position;
        //Try to change the parameters of the line below, like duration and delay to see what they change.
        this.tag('LilLightning').patch({ smooth:{ x: [400, { duration: 2, delay: 0, timingFunction: this._currentTransition } ]}});
        this._index = 0;
        this._transitions = ['linear','ease','ease-in','ease-out','ease-in-out','step-start','step-end'];
        this._currentTransition = 'linear';

const options = {stage: {w: window.innerWidth, h: window.innerHeight, useImageWorker: false}};
const app = new BasicUsageExample(options);

Give feedback

Rating - 4.2 / 5. . Reviews - 5

No votes so far! Be the first to rate this post.

Go To Top