Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Vishwas Gagrani

Is it possible to animate spritesheet through GSAP ?

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

Hi!

   I have seen many tutorials showing tween animation on objects. However, I want to know if it's possible to animate cells of a spritesheet too using GSAP ? Like how it's done in other frameworks. I am doubtful about this, since spritesheet are probably canvas-only feature. So, if not, is their any alternative to animate images in sequence through GSAP ?

 

Link to comment
Share on other sites

You really only need canvas to unpack a spritesheet, and that's super easy to do using the drawImage method. Just plug in the coordinates of the frame and draw it on a new image or canvas.

ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

suLRZ5E.png

It's better to unpack a spritesheet before use, but not always necessary. I made this demo to show that it really doesn't matter as long as you know where on the spritesheet a frame is located.

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


 
Here's the original json...
https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/explosions.json
 

...and spritesheet for that demo.

https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/explosions.png
 
.

  • Like 4
Link to comment
Share on other sites

Hello Vishwas Gagrani, and Welcome to the GreenSock Forum!

 

Here is an example of using GSAP to create a sprite-sheet animation using steppedEase like Carl described above.

 

Fire animation sprite-sheet example:

 

See the Pen zrGGmQ by jonathan (@jonathan) on CodePen

 

The Fire was made in Adobe Flash and exported as separate images. Then i used an online sprite-sheet image generator which combined the separate images into one long horizontal sprite-sheet image.

 

:)

  • Like 3
Link to comment
Share on other sites

  • 1 month later...

HI Web Dizajner :)

 

Please try this in your pen:

TweenMax.to(character, 1, {backgroundPosition: "-1288px", ease:SteppedEase.config(7), repeat:-1});

Happy tweening.

:)

  • Like 2
Link to comment
Share on other sites

Now is working fine but I dont understand why?

 

Is it normal to be full width - 1472?

 

See the Pen VpZBZV by anon (@anon) on CodePen

 

Anyway thanks a lot.

Link to comment
Share on other sites

You have your starting frame and 7 additional frames so you really only want to step 7 times. If you moved the background -1472, you'd be 184px beyond the end of the spritesheet. That's why your original was showing that odd little jump on repeat.

 

Happy tweening.

:)

  • Like 6
Link to comment
Share on other sites

That's actually what I was referring to in my post above as that is what I use. Money well spent!

 

A packed sprite sheet uses less memory and can improve performance, especially on mobile devices with limited memory. This is much better than having an ordered sprite sheet where each frame is the same size.

 

MBfZqUV.png

 

 

TexturePacker works with a bunch of different libraries and CSS, or you could manually do it yourself. Here's a demo showing how to use the drawImage canvas method I mentioned above. 

 

 

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

 

 

.

  • Like 7
Link to comment
Share on other sites

As always, thanks Blake!

 

With the Slide/Modal you helped me with I am loading three images and using a crossfade to make the illustration build to the final image...

Should I think about using the sprite approach? I'm thinking it is one http request instead of three but they are larger images... not sure if I really gain anything performance wise.

 

Click the thumbnail to see the animation (this is an early version not the fixed version):

See the Pen MJxNEJ by jh-thank-you (@jh-thank-you) on CodePen

Link to comment
Share on other sites

One http request is usually better than 3, but it all depends on what you're requesting. One nice thing about TexturePacker is that it will let you know if a sprite sheet is too big, in which case you should be break it up into multiple sprite sheets. 

  • Like 3
Link to comment
Share on other sites

  • 2 years later...

Hey guys, 

I was playing with this 

See the Pen yLBJYrB by gianpiero-di-lullo (@gianpiero-di-lullo) on CodePen

 

In some steps the svg looks like it's pixelated on chrome (I know, I have no idea how I managed to do that)

The animation is a bit clanky because I had to draw each individual step for the sprite.  Any advice on how to tackle this animation in a different/better way? Also, how performant is it this way? Am I going to break people's computers?

 

Thank you!

Jp

Link to comment
Share on other sites

42 minutes ago, jp_uk81 said:

In some steps the svg looks like it's pixelated on chrome (I know, I have no idea how I managed to do that)

 

Are you seeing this on a HiDPI monitor, like a 4k, 5k, Retina, mobile, etc? It might be because you are using a background image, which doesn't adjust for the resolution of the display. 

 

I, for one, have never recommended using background position for sprite sheets. I think it's better to use transforms like x and a real image. 

 

See #2 in this demo for an example of that.

 

See the Pen MYdwRP by MAW (@MAW) on CodePen

 

And this demo for a sprite sheet that has rows and columns.

 

See the Pen LJjpoo by osublake (@osublake) on CodePen

 

42 minutes ago, jp_uk81 said:

The animation is a bit clanky because I had to draw each individual step for the sprite.  Any advice on how to tackle this animation in a different/better way?

 

Not really. I always have an artist to that sort of stuff for me.

 

42 minutes ago, jp_uk81 said:

Also, how performant is it this way? Am I going to break people's computers?

 

It's pretty performant. Using transforms is even more performant.

 

 

  • Like 4
Link to comment
Share on other sites

19 hours ago, OSUblake said:

Not really. I always have an artist to that sort of stuff for me.

 

Hey @OSUblake,

 

I would have bet you would recommend a little canvas and three.js.

 

See the Pen YzKWVzg by mikeK (@mikeK) on CodePen

 

OK: raycaster and hover is not my level! I just start to play a little.

 

Happy tweening ...

Mikel

  • Like 3
Link to comment
Share on other sites

On 8/16/2019 at 7:30 PM, OSUblake said:

Are you seeing this on a HiDPI monitor, like a 4k, 5k, Retina, mobile, etc? It might be because you are using a background image, which doesn't adjust for the resolution of the display. 

Thank you @OSUblake, yes now it's much better with transform x

See the Pen yLBJYrB by gianpiero-di-lullo (@gianpiero-di-lullo) on CodePen

 

On 8/17/2019 at 3:28 PM, mikel said:

I would have bet you would recommend a little canvas and three.js.

Thanks Mikel, I tried but I cannot replicate this with any 3d software so I didn't even try three.js. The first frame of the sprite is a logo, which at first glance seems a 2d shape until you hover it. The perspective is so distorted that I couldn't recreate it with 3d apps

  • Like 2
Link to comment
Share on other sites

  • 1 year later...
On 2/23/2017 at 6:41 AM, OSUblake said:

That's actually what I was referring to in my post above as that is what I use. Money well spent!

 

A packed sprite sheet uses less memory and can improve performance, especially on mobile devices with limited memory. This is much better than having an ordered sprite sheet where each frame is the same size.

 

http://i.imgur.com/MBfZqUV.png

 

 

TexturePacker works with a bunch of different libraries and CSS, or you could manually do it yourself. Here's a demo showing how to use the drawImage canvas method I mentioned above. 

 

 

 

 

 

 

.

@OSUblakeThanks for this great script! I'm busy with a page transitions that's using this script. 

 

I have a grid of trains. Clicking on a train will enlarge it (with GSAP FLIP) and while this happens the canvas animation plays. (finally you end up on the detail page of the train) (see screenshots)

 

This is working for 1 instance. I'm trying to refactor your code in order to make it work with multiple instances.

 

My code can be found here > https://stackoverflow.com/questions/68482925/adding-a-timeline-to-a-master-timeline-and-add-a-parameter

 

Do you have an idea what's the most efficient way to enhance your code?

 

Screenshot 2021-07-22 at 16.32.45.png

Screenshot 2021-07-22 at 16.32.19.png

Edited by Duet Colin
Mentioning
Link to comment
Share on other sites

The best way to create multiple things of something is to just wrap everything up a function and then call it however many times you need to. You can of course pass in parameters to customize each instance.

 

createAnimation();
createAnimation();
createAnimation();

function createAnimation() {
  // add sprite sheet code
}

 

Link to comment
Share on other sites

Hi @Duet Colin 

 

Just in case that wasn't clear...

 

See the Pen PomJvZR by GreenSock (@GreenSock) on CodePen

 

In the future it's best to just create a new topic instead of reviving an old one.

 

  • Like 1
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.
×