Using sprite sheets to reduce file size in GSAP banner animations

[sreid]

Hello,

 

In the article, Solutions for Banner Ads in the Post-Flash World, posted on your site, it mentions that "Sprite sheets can be used to combine images", hence cutting down on the number of files in your final delivery.

 

I have tried to convert a GSAP banner animation that works perfectly with multiple, separate images in the "img" folder, to one that utilizes a Sprite Sheet.

 

The images are not part of an image sequence for say animating a character of sorts.

 

 

Using the sprite sheet, and the associated CSS that was generated in Fireworks, I am able to get the images to show up when previewed in a browser, but they do not animate, as they did when I had all separate images in my "img" folder.

 

Do you have a tutorial, or example file that can demonstrate how to utilize a Sprite Sheet in a GSAP animations, outside of image sequences?

 

It would be greatly appreciated!!

 

[GreenSock]

The concept is basically:

• Combine all your images into one big one
• For each image, create a <div> with the background-image set to that big image, set overflow:hidden, and then use the background-position to move it into the correct spot so that only that [sub-]image is showing. 
• Animate the  <div> as you normally would the <img> 

Does that help? 

[Rodrigo]

Hi and welcome to the GreenSock forums.

 

In order to add to our Big Kahuna's advice check this codepen that Jamie made some time ago. As you can see He covered animating a group of images as well as vertical and horizontal sprites:

 

See the Pen aJcGl by jamiejefferson (@jamiejefferson) on CodePen

 

Happy Tweening!!

[joe_midi]

I also did some tests with animated spritesheets for character animations if you had the images split across vertical and horizontal:

 

See the Pen mJbLyO by joemidi (@joemidi) on CodePen