An Angular directive for creating simple sprites.
1 person uses it


An easy-to-use AngularJS directive for creating simple sprite animations.

Quick Start

  • Install angular-simple-sprite with Bower
  • Include the required libraries in your index.html:
  • Inject the simple-sprite module into your app:
  • Implement the simple-sprite directive in your HTML:

Be sure to check the example folder if you'd like to see simple-sprite in action.


  • src - The path to your sprite image.
  • frame-width - The width of a single frame in your sprite.
  • frame-height - The height of a single frame in your sprite.
  • frames - The total number of frames in your sprite.
  • frames-per-row - Optional The number of frames on each row in your sprite, for example if your frames are arranged 4x2, your frames-per-row is 4. A fully vertical sprite would have a frames-per-row of 1, and a fully horizonal sprite would have a frames-per-row of 0. Defaults to 0.
  • repeat - Optional Determines whether or not the sprite animation should repeat. Defaults to true.
  • speed - Optional The speed between each frame in milliseconds. Defaults to 100ms.


Tushar Ghate


comments powered by Disqus
This page was last updated almost 3 years ago.