🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

This is a React component that animates through an image sprite.

Animation React

Documentation

React Sprite Animator

Greenkeeper badge

Build Status

This is a component that animates through an image sprite.

Install

$ npm i react-sprite-animator -S 

Usage

<SpriteAnimator   sprite='/path-to/sprite.svg'   width={100}   height={100} />

Props

  • width {number} - width of clipped sprite (original, non-scaled dimensions)
  • height {number} - height of clipped sprite (original, non-scaled dimensions)
  • scale {number} - scale of the original sprite (default: 1, retina / @2x: 2)
  • sprite {string} - path to sprite
  • direction {string} - horizontal/vertical
  • shouldAnimate {bool} - if the sprite should animate
  • startFrame {number} - the frame to start animation
  • fps {number} - the frame rate (frames per second) target
  • stopLastFrame {bool} - stops animation from looping
  • frame {number} - manually sets current frame

Only required for two-dimensional sprites

  • frameCount {number} - the total frame count of the sprite
  • wrapAfter {number} - the row or column count of the sprite (direction: "horizontal" -> columns, "vertical" -> rows)

You May Also Like