SCSS Mixin that Brings Image Sprite to life
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Sprite Spirit

SCSS Mixin that Brings Image Sprite to life

Image Sprite to Animation Generator:

sprite spirit

Quick start using CDN:

Using npm:

npm install sprite-spirit

Using bower:

bower install sprite-spirit


Include Sprite Spirit Mixin in your project and then use it like:

@include spriteSpirit($name, $url, $vertical, $width, $height, $frameNum, $duration, $iteration, $reverse);
  • $name - String - Animation Name
  • $url - String - Image Sprite Path
  • $vertical - Boolean - Vertical Sprite?
  • $width - Number - Image Sprite Width
  • $height - Number - Image Sprite Height
  • $frameNum - String - Animation Frames
  • $duration - Number - Animation Duration - .8 is Default
  • $iteration - Number - Animation Iteration - 0 is Default (Infinity)
  • $reverse - Boolean - Reverse Animation - false is Default

Demo of Usage


Handcrafted with love by Elior Shalev Tabeka