Nocturnal Prancing Mosquito

    motion-tween
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.7 • Public • Published

    API

    let tween = new Tween(false,null,60); // autoStart, loop engine,  framerate //still working on this
    let animation = tween.create({
            origin: object | number,
            target: object | number,
            duration: 1 // in seconds,
            ease: Tween.easings.BOUNCEOUT,
            before(),
            update(),
            complete(),
        })

    Play Animation simultaneously

    let tween = new Tween(),
        vector = { x:0, y:0, z: 0};
     
    let A = tween.create({
        origin: vector,
        target: { x: 10 },
    })
     
    let B = tween.create({
        origin: vector,
        target: { y: 10 },
    })
     
    tween.start()

    Time Properties independently

    let tween = new Tween(),
        tween.create({
            origin: { x: 0, y: 0, z: 0},
            target: { x: 10 },
            ease: {
                x: Tween.easings.ELASTICIN,
                y: Tween.easings.EXPOIN,
                z: Tween.easings.LINEAR
            },
            duration:{
                x: 1,
                y: 2,
                z: 3
            }
    })

    Chain!

     
    let tween = new Tween(),
        vector = { x:0, y:0, z: 0};
     
    tween.create({
            origin: vector,
            target: { x: 10 },
        })
        .then({
            target: { x: 20 }
        })
        .then({
            duration: 5,
            target: { y: 50 },
            complete(){
                //do something
            }
        })
        .then({
            origin: anotherObject,
            //target will be equivalent as the previous on the chain unless you replace it here
            duration: 5,
            target: { y: 50 }
        })
        .then(function(){
            console.log('im done')
        })

    You can use your own update function in case you already are using requestAnimationFrame or if u don't really want to use it.

     
    let tween = new Tween(false),
     
    //elapsed time since start it could be performance.now() or Date().getTime()
     
    yourLoopFunction(function(time){ 
        tween.update(time)
    })
     

    Compilation

    $ webpack

    Tests

    $ npm run test

    Install

    npm i motion-tween

    DownloadsWeekly Downloads

    11

    Version

    1.0.7

    License

    MIT

    Last publish

    Collaborators

    • milewski