Modern Responsive Sprites Animation JS Library – spritz.js

spritz.js is a lightweight, responsive, highly customizable JavaScript sprites animation library allows you to create a ‘gif’ style animation with a png/jpg sprite.

How to use it:

Install and import the spritz.js into your web project.

# Yarn
yarn add spritz.js
# NPM
$ npm install spritz.js

import Spritz from 'spritz.js'

Create an empty element in which you want to display the sprites animation.

<div id="sprite"></div>

Initialize the Spritz and specify the array of picture objects to be used as Sprite.

Spritz('#sprite', {
 picture: [
 {
 srcset: 'hd.png',
 media: '(min-width: 1200px)',
 width: 7800, height: 2829,
 objectFit: 'cover'
 },
 {
 srcset: 'lg.webp',
 width: 3900, height: 1415
 },
 {
 srcset: 'full.png',
 width: 3900, height: 1415
 objectFit: 'contain'
 }
],
})

Default options to customize the sprites animation.

Spritz('#sprite', {
  // Number of steps (or frames) composing the sprite.
  steps: 1,
  // Number of rows (or lines) composing the sprite.
  rows: 1
  
})

API methods.

// Change animation speed from its default value (15).
sprite.fps(10) // Change speed to 10fps
// Play animation forward (using the current fps value). 
// A backward option can be passed as parameter.
sprite.play()
sprite.play('backward') // Alternative way to play an animation backward

// Play animation backward (using the current fps value).
sprite.playback()
// Pause the current animation.
sprite.pause()
// 
sprite.stop()
// Chainable timeout that can be used to delay stuff. 
// The delay value is to be passed as parameter, in milliseconds.
sprite.wait(1000) // Wait for 1 second
/* Usage example */
sprite
  .play() // Play animation
  .wait(2000) // Then wait for 2 second
  .stop() // Then stop animation
// Change the current step (or frame) of the sprite. Target step to be passed as parameter.
sprite.step(5)
// Go to the next step (or frame).
sprite.next()
// Go to the previous step (or frame).
sprite.prev()
// Build and load the sprite, within its selector. Initial step can be passed as parameter.
sprite.init() // Basic usage
sprite.init(2) // Initial step is 2 (default = 1)
// Completely destroy the sprite element and behaviors. Restore the initial state.
sprite.destroy()
// The next animation will automatically pause at the value specified. Two parameters can be used:
step (required): Step/frame at which the animation should stop.
loop (optional, default 1): Loop at which the animation should stop.
sprite.until(7) // Animation will automatically stop at step/frame 7
sprite.until(3, 2) // Animation will automatically stop at step/frame 3, on the second loop
/* Usage example */
sprite
  .until(7) // Stop following animation at step/frame 7
  .play() // Play animation (will automatically stop at step/frame 7)

// Flip the sprite horizontally.
sprite.flip()
// Return data, then call the callback function with result. Two parameters can be used:
// data (required): Data to return. Possible values: step| picture.
// callback (optional): Callback function to be called with result as first parameter.
// console log the current step/frame
sprite.get('step', (currentStep) => {
  console.log(currentStep)
})
// console log the current picture in use
sprite.get('picture', (pic) => {
  console.log(pic)
})

Events.

// Sprite is ready for use (after init)
sprite.on('ready', () => { /* Do something */ })
// Sprite image has been loaded (current 'picture' loaded passed as parameter)
sprite.on('load', (picture) => { /* Do something */ })
// Sprite has been destroyed
sprite.on('destroy', () => { /* Do something */ })
// Sprite animation start ('forward' or 'backward' passed as first parameter)
sprite.on('play', (direction) => { /* Do something */ })
// Sprite animation pause
sprite.on('pause', () => { /* Do something */ })
// Sprite animation stop
sprite.on('stop', () => { /* Do something */ })
// Animation timeout delay in  progress ('delay' value passed as parameter)
sprite.on('wait', (delay) => { /* Do something */ })
// Step changed manually ('from' and 'to' passed as parameters)
sprite.on('change', (from, to) => { /* Do something */ })
// Viewport has been resized (new current 'picture' passed as parameter)
sprite.on('resize', (picture) => { /* Do something */ })

Changelog:

10/14/2019

• v2.2.2: Dependencies update