Attributes

Published: September 03, 2019
Edited: September 03, 2019

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

NameTypeDefaultDescription
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:

NameDescription
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 cubic-bezier.com.

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'}
        }
    }
    
    _handleLeft(){
        if(this._index > 0){
            this._index --;
            this._currentTransition = this._transitions[this._index];
            this.changeSmoothing();
        }
    }
    
    _handleRight(){
        if(this._index < 6){
            this._index ++;
            this._currentTransition = this._transitions[this._index];
            this.changeSmoothing();
        }
    }
    
    changeSmoothing(){
        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 } ]}});
    }
    
    _init(){
        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);
document.body.appendChild(app.stage.getCanvas());