Spritesheet animations

Last Updated: Jul 22, 2016 11:36AM CEST

In this article

    There are occasions where you want to implement animations based on image frames, or even GIFs. In order to play and animate the sprite sheet, all you have to do is use our Spritesheet animation widget.

    How to use

    1. In order to use the Spritesheet animation, start by uploading the spritesheet to your media library.
    2. Once it's uploaded, right-click on it in the Media Library and select Download Image. On the page that opens, copy the URL from it in the address bar.
    3. Next, drag and drop the Spritesheet animation widget to the banner canvas.
    4. Double-click on the widget and paste the URL you copied earlier into the text area.
    5. In order for the widget to step through the sprites correctly, what you need to do is to specify the Amount of frames (sprites) that exists in the sprite sheet, the Amount of columns as well as the Amount of rows. If they are set incorrectly, the sprite animation will look wonky.
    6. To further adjust it to your liking, change the Frames per second to change the animation speed.


    All that's needed is a spritesheet (typically a PNG) with frames that are all equal in width and height.


    If you want to have more control over your GIF animations, we highly recommend that you convert it to a sprite sheet. To do this efficiently, we recommend using SpritePlane


    Settings Description Value type
    Number of frames The total amount of frames the sprite sheet has Number
    Frames per second How many frames of the sprite sheet that should be animated per second Number
    Play infinitely Whether or not the animation should keep playing once it's finished On/Off
    Sprite rows The amount of rows the spritesheet has Number
    Sprite columns The amount of columns the spritesheet has Number
    Previous Article Next Article


    seconds ago
    a minute ago
    minutes ago
    an hour ago
    hours ago
    a day ago
    days ago
    Invalid characters found