CODEWITHSUNDEEP
cssreactjscss-animationscss-sprites
freeBeerTomorrow
freeBeerTomorrow

Reputation: 353

How to use Texture Packer sprite sheet / CSS sprites to animate in React?

I was given a sprite sheet generated by TexturePacker + css files by a client to create an animation for a react site:

The CSS files look like this:

.sprite {display:inline-block; overflow:hidden; background-repeat: no-repeat;background-image:url(Sprite1.png);}


.Position1_0000 {width:10px; height:10px; background-position: -0px -0px} 
.Position1_0001 {width:25px; height:120px; background-position: -10px -0px}

The sprite sheets are 2 PNG files and the sprites are all different sizes. My goal is to add this animation to existing react site. I couldn't find any existing libraries that work with different size sprites.

My questions:

  1. Is there a best practice way to create the animation? Any frameworks?
  2. Do I use setTimeout or requestAnimationFrame? Do I need to use a canvas?
  3. How would I account for the fact that the animation isn't in place but flying in for the first few frames?

Upvotes: 2

Views: 496

Answers (0)

Related Questions