Have ideas to improve npm?Join in the discussion! »

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

    3.0.7 • Public • Published


    a simple and powerful pixi.js easing/tweening/animating library


    • ease any pixi.js parameter, including tint (using a blend function or stepped)
    • use any Penner function by name or any user-defined function
    • support for generic number parameters
    • change scale or skew using one parameter (e.g., scale: 5 changes both scale.x and scale.y)
    • set default durations and easing function for all eases
    • uses eventemitter3 for events for both the easing lists and individual eases
    • tracks eases on DisplayObject and cleans up when DisplayObject is destroyed
    • includes a default easing list so you don't have to instantiate for simple cases
    • includes a shake parameter
    • good test coverage

    Live Demo


    Migrating to v3

    • changed default update loop to use requestAnimationFrame to remove the dependency on pixi.js
    • to use PIXI.Ticker (like in v2), pass new Ease({ ticker: PIXI.Ticker.shared })
    • ordinary usage should be unchanged


    yarn add pixi-ease

    or grab the latest release and use it:

    <script src="/directory-to-file/pixi.js"></script>
    <script src="/directory-to-file/pixi-ease.js"></script>
    <!-- or <script type="module" src="/directory-to-file/pixi-ease.es.js"></script> -->
        const ease = new Ease.Ease(options)
        // or Ease.ease.add(...)

    API Documentation


    Simple Usage

    import * as PIXI from 'pixi.js'
    import { Ease, ease } from 'pixi-ease'
    const app = new PIXI.Application()
    const test = app.stage.addChild(new PIXI.Sprite(PIXI.Texture.WHITE))
    test.tint = 0x00ff00
    const example = ease.add(test, { x: 20, y: 15, alpha: 0.25, rotation: 20, scale: 5, skewX: 0.25, blend: 0xff0000 } }, { reverse: true, duration: 2500, ease: 'easeInOutQuad' })
    example.on('each', () => console.log('ease updated object during frame using PIXI.Ticker.'))
    example.once('complete', () => console.log('move ease complete.'))
    test.generic = 25
    const generic = ease.add(test, { generic: 0 }, { duration: 1500, ease: 'easeOutQuad' })
    generic.on('each', () => console.log(test.generic))
    const secondEase = new Ease({ duration: 3000, wait: 1500, ease: 'easeInBack', repeat: 3 })
    const test2 = app.stage.addChild(new PIXI.Sprite(PIXI.Texture.WHITE))
    secondEase.add(test2, { tint: [0xff0000, 0x00ff00, 0x000ff], scaleX: 2 })

    Build Examples

    I've included a bunch of build examples in the builds directory, including: browserify, rollup, standalone (e.g., cdn), standalone (pixi.js v4), and typescript.


    1. Clone repository
    2. yarn install
    3. yarn test (for Mocha test code)
    4. yarn coverage (for Instanbul coverage)

    To run demo locally:

    1. Clone repository
    2. yarn install
    3. yarn build
    4. yarn dev
    5. open browser to http://localhost:10001

    To run build examples:

    1. Clone repository
    2. yarn install
    3. yarn build
    4. yarn builds
    5. yarn test-builds
    6. open browser to http://localhost:5000

    Other Libraries

    If you liked pixi-ease, please try my other open source libraries:

    • pixi-viewport - A highly configurable viewport/2D camera designed to work with pixi.js.
    • pixi-scrollbox - pixi.js scrollbox: a masked box that can scroll vertically or horizontally with scrollbars (uses pixi-ease)
    • intersects - a simple collection of 2d collision/intersects functions. Supports points, circles, lines, axis-aligned boxes, and polygons


    MIT License (c) 2019 YOPEY YOPEY LLC by David Figatner


    npm i pixi-ease

    DownloadsWeekly Downloads






    Unpacked Size

    205 kB

    Total Files


    Last publish


    • avatar