Jump to content
GreenSock

redmile

Multiple animation with a single spritesheet

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

Hello,

I created a single spritesheet that cointains two animations inside it

 

As You can see from this image

 

2nwmOzv.png

 

 

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

spritesheet_guile_cxecmn.png

 

 

And this is my code:

 

html

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

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

css

#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;
}

Javascript

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:

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

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.play("powerPunch")
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

Thanks Carl! This forum is just awesome :)

 

I want to study GSAP more in depth (I bought the Noble Desktop's Step by Step guide. Still reading). Hope to upgrade my plan soon

 

Thanks again all guys!

  • Like 4
Link to comment
Share on other sites

That's a good idea Carl. I wasn't even thinking about labels for that, but that would be better.

 

I've never needed a spritesheet animation for any of my projects, but that's good to know for any need in the future. :)

  • Like 4
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

OSUblake thank you very much. Really helpful :)

  • Like 1
Link to comment
Share on other sites

Speaking of Street Fighter. I saw this the other day. It uses CSS for the animations and feels really sluggish. I bet I could improve that a lot by using GSAP. I'll see if I can do that this weekend.

See the Pen smtHA by jkneb (@jkneb) on CodePen

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.
×