TypeScript
Switch branches/tags
Nothing to show
Clone or download
Latest commit 404d60f Jun 13, 2018
Permalink
Failed to load latest commit information.
dist 1.0.0 Jun 10, 2018
docs Added meta tags Jun 13, 2018
js 1.0.0 Jun 10, 2018
src 1.0.0 Jun 10, 2018
test Simple declaration bug fixes Jun 8, 2018
.gitignore TSLint May 28, 2018
.travis.yml Fixed linting issues Jun 4, 2018
LICENSE Initial commit May 22, 2018
README.md Added logo Jun 10, 2018
package-lock.json Fixed linting issues Jun 4, 2018
package.json 1.0.0 Jun 10, 2018
tsconfig.json Unit testing May 30, 2018
tslint.json Fixed linting issues Jun 4, 2018

README.md

motus

Motus Logo

Build Status

Animation library that mimics CSS keyframes when scrolling.

DEMO Website

Installation

As npm package

npm i -S motus

Standalone script file

<script src="dist/motus.js"></script>

Usage

Basic usage

const myAnimation = new Motus.Animation(
    new Motus.Point(100), // set animation start position in px
    new Motus.Point(200), // set animation end position in px
    {
        50: { // make font size 10 px before it hits 50% of the distance (in this case <150px)
            fontSize: 10, // px by default
        },
        100: { // make font size 20 px after 50%
            fontSize: 20, // px by default
        }
    }
);
Motus.add(myAnimation);

Different usages

/********************************************
    Different ways of defining keyframes
*********************************************/
const k1 = {
    50: {
        'font-size': {
            to: 10, // px by default
        }
    },
    100: {
        'font-size': {
            to: 20,
        }
    }
}
//*******************************************
const k2 = {
    50: {
        'font-size': {
            from: '5em', // initial value (in this case at 0%)
            to: '10em',
        }
    },
    100: {
        fontSize: {
            from: '10em',
            to: '20em',
        }
    }
}
//*******************************************
const k3 = {
    50: {
        fontSize: {
            to: 10,
            unit: 'em',
        }
    },
    100: {
        'font-size': {
            from: 10,
            to: 20,
            unit: 'em',
        }
    }
}

const mYaNiMaTiOn = new Motus.Animation(
    new Motus.Point(document.getElementById('start-point')), // dom elements instead of px
    new Motus.Point(document.getElementById('end-point')),
    k1 || k2 || k3 // your choice
);
Motus.add(mYaNiMaTiOn);

Development

npm run tsc - compiles ts files in js files

npm run build - watches for changes and compiles ts files into dist in develompent mode

npm run watch - watches for changes and compiles with build ts files into dist

npm run prod - watches for changes and compiles ts files into dist in production mode

License

MIT