Jump to content
Search Community

Multiple animation with a single spritesheet

redmile test
Moderator Tag

Go to solution Solved by Carl,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts


I created a single spritesheet that cointains two animations inside it


As You can see from this image





The last four frames represent the initial animation, while the first ten, represent the second animation (And It starts when I click a play button)


What I would achieve is:


1) The first animation (last four frames) start and it loops UNTIL I press the play button

2) Then the second animation start

3) TimelineLite come back to the first animation


I tried to obtain this result with two spritesheet but though a single one should be a more elegant solution


Thanks in advance for any help :)

Link to comment
Share on other sites

I modified the spritesheet to this




And this is my code:



<div class="aligner" style="height:100vh;">
		<div id="guile"></div>					

		<div style="margin-top: 1em;">
			<button id="play" class="button big primary">Play</button>						


#guile {
  background: url('../../spritesheet_guile.png') no-repeat;
  width: 140px;
  height: 122px;

.aligner {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;

button {
	margin-top: 1em;


var tl = new TimelineLite();
var guile = document.getElementById('guile');

tl.to(guile, 2, { backgroundPosition:"-1848px 0px", ease:SteppedEase.config(13), repeat: -1 });

$( "#play" ).click(function() {
  • Like 1
Link to comment
Share on other sites

Hi redmile :)


I think the easiest approach would be to loop through the first 4 frames and then have a click interrupt that loop, set the background back to 0 and then play the entire animation. When that sequence finishes you can then go back to the 4 frame loop.


I made a quick CodePen for you:


See the Pen oLdrPz by PointC (@PointC) on CodePen



If you could create a pen for your future question that would be helpful in getting an answer for you. Here's the link about how to create one:



Hopefully that helps.


Happy tweening.


  • Like 4
Link to comment
Share on other sites

Hi @PointC and thanks for Your reply :)


I created the codepen but unfortunately the cdn I used to link the external images, didn't work


I saw You used amazon s3. Good to know for the next time :)


Thanks again, I take a look to your solution

Link to comment
Share on other sites

  • Solution

When loading your image from a CDN you may want to try leaving off the http protocol like


//myserver.com/myimage.jpg instead of http://www.mysever.com/myimage.jpg


If something isn't loading chances are there will be a console error.


If you create tweens in your timeline for each sequence of your animation you could put labels at the beginning and end of each sequence and do things like

animation.tweenFromTo("powerPunchBegin", "powerPunchEnd"); //TimelineMax

Here is a semi-related demo that puts a label on each frame of an animation: http://codepen.io/GreenSock/pen/MwoeXy?editors=001


The short story is you can definitely do what you want with 1 image and using multiple tweens in one timeline with good labels will give you a lot of flexibility for controlling those animations.

  • Like 5
Link to comment
Share on other sites

You might run into problems on mobile devices using a large sprite sheet. I think 2048x2048 is the recommended max size, so there's nothing wrong with using multiple sprite sheets.


I made a demo using the ModifiersPlugin showing how you can create animations using a packed sprite sheet. The frame dimensions are pulled directly from the JSON file created by the texture packer.

See the Pen Eywvzx?editors=0010 by osublake (@osublake) on CodePen


This is a more complicated demo using 2 sprite sheets. It uses a different technique, but you can't tell when the sprite sheet changes.

See the Pen OXPLPJ?editors=0010 by osublake (@osublake) on CodePen

  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...