Kinetic Scrolling Plugin for Phaser Framework

Usage no npm install needed!

<script type="module">
  import phaserKineticScrollingPlugin from '';


Kinetic Scrolling Plugin for Phaser Framework

Kinetic Scrolling Plugin

The vertical and horizontal scrolling is a very useful feature in the games for example to display a section of levels and with this plugin you can simulate the scrolling within a canvas element of HTML5... so check this awesome plugin for Phaser Framework!

Kinetic scrolling based on

Download the Plugin


Install via bower

bower i phaser-kinetic-scrolling-plugin --save

Install via npm

npm i phaser-kinetic-scrolling-plugin --save

Load the Plugin =;

Change Default Settings of the Plugin - It isn't necessary, default is horizontal{
    kineticMovement: true,
    timeConstantScroll: 325, //really mimic iOS
    horizontalScroll: true,
    verticalScroll: false,
    horizontalWheel: true,
    verticalWheel: false,
    deltaWheel: 40,
    onUpdate: null //A function to get the delta values if it's required (deltaX, deltaY)

Start the Plugin;

Stop the Plugin;

Full Example

var game = new Phaser.Game(1024, 768, Phaser.AUTO, '', {
    init: function () {

        //Load the plugin =;

        //If you want change the default configuration before start the plugin
    create: function () {

        //Starts the plugin;

        //If you want change the default configuration after start the plugin

        this.rectangles = [];

        var initX = 50;

        for (var i = 0; i < 26; i++) {
            this.rectangles.push(this.createRectangle(initX, - 100, 250, 200));
            this.index = + 125,, i + 1,
                        { font: 'bold 150px Arial', align: "center" });
            initX += 300;

        //Changing the world width, 0, 320 * this.rectangles.length,;
    createRectangle: function (x, y, w, h) {
        var sprite =, y);
        sprite.beginFill(Phaser.Color.getRandomColor(100, 255), 1);
        sprite.bounds = new PIXI.Rectangle(0, 0, w, h);
        sprite.drawRect(0, 0, w, h);
        return sprite;


The repository has some examples of the plugin, to run the examples created by the community execute the command gulp examples from the terminal:

  • Horizontal scrolling
  • Horizontal scrolling with scrollbar
  • Horizontal scrolling and pressing events
  • Horizontal and Vertical scrolling (Mouse wheel too)
  • onUpdate callback to track delta


jdnichollsc daniel-mf VitaZheltyakov iamchristopher daaaabeen
Nicholls Daniel Vitaliy Chris Wright Daaaabeen

Other Projects


I believe in Unicorns 🦄 Support me, if you do too.

Happy scrolling

Made with <3