Package Exports

@keyframes/spritesheet

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@keyframes/spritesheet) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Keyframes.Spritesheet

Keyframes.Spritesheet is a plugin for Keyframes that easily generates css3 keyframes for elements using animated spritesheets.

Installation

import Spritesheet from '@keyframes/spritesheet';
Keyframes.plugin(Spritesheet);

Usage

Defining spritesheet keyframes.

var keyframes = Keyframes.spriteSheet({
  name: 'gem', // Name of the spritesheet
  rows: 6, // Number of rows
  cols: 7, // Number of columns
  width: 210, // Width of the spritesheet in pixels
  height: 180, // Height of the spritesheet in pixels
  offsetX: 0, // [Optional] When you have multiple spritesheets in one -
  offsetY: 0, // - image use these to define their offset. 
  count: 39 // [Optional] Define the number of sprites in total
});

Applying them to an element

const item = new Keyframes(document.getElementById('item'));
item.playSpriteSheet(name, time, loop, keyframes);

name - name of the spritesheet.
time - time for the animation to complete.
loop - [optional] number of times to repeat the animation (-1 for infinite)
keyframes - [optional] pass keyframes to get them defined

For example

const item = new Keyframes(document.getElementById('item'));
item.playSpriteSheet('gem', '3s', -1, keyframes);

Example

http://jsfiddle.net/22Hyq/

Credits

"Gems" Image created by Lokiare. Image is subject to the creative commons license: http://creativecommons.org/licenses/by/3.0/