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.

Requirements

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

☝️ Tip

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 ⚙️

Did this answer your question?