Sprite image animation speed - Animation goes jumpy

[kodralex]

Hi,

 

I'm trying to create a simple looped animation based on an image sprite sheet. I've made the image no problem in TexturePacker and found some previous code from doing some searches (I think Blake posted). So I've grabbed this code and updated it to GSAP3, and all is working fine. I want to slow the animation right down, so it's running much slower. I can adjust the duration to say 20 / 30, but the animation goes very jumpy. Any ideas on how to get around this? Could this be related to the large size sprite sheet? I've attached a working pen that you can check out. 

 

Thanks

See the Pen wvPNmzW by alexkodr (@alexkodr) on CodePen

[Cassie]

Heya!

If you slow it down you'll be able to visually notice the 'steps' between images.

The faster it is the less perceptible the jump between image frames is. Think of it as FPS (frames per second) - if you slow down the speed you have less frames per second. In order to get around that you need to add more frames to the sprite sheet!

[kodralex]

Hi Cassie,

 

Thanks for replying. Hmmm, that did cross my mind that it was related to FPS. I could easy created more frames, but I think I might start to see limitations with using an image sprite (just because of the size). It could end up with 500+ frames. Here is a sample .mp4 https://kodr.io/sample.mp4 showing precisely what I'm trying to get (please ignore it's rough). These shapes have been created in either blender or cinema 4d. Do you know if it's possible to make this kind of animation using GSAP? I could use mp4, but I can't place it on a transparent background. Any thoughts?

 

Thanks

[mikel]

Hey @kodralex,

 

It could be an alternative to morph such a line art.
Here is an example with some effects.

 

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

 

Happy morphing ...

Mikel

 

 

[elegantseagulls]

5 hours ago, kodralex said:

I could use mp4, but I can't place it on a transparent background. Any thoughts?

 

I like @mikel's idea! More on that here:

 

And here:

Though there's a small chance you could run into performance pinches depending on size of the SVGs, in that case you could try canvas (more here: 

) or 2D WebGL (Maybe pixi using a displacement map?) could be a good solutions too, but those solutions are a bit more complex.

[Shrug ¯\_(ツ)_/¯]

Unless the exported renders are more complex than what is being shown in your sprite sheet, I would think the following examples of math based approaches would be a better overall approach given what you’ve shown.

 

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

 

See the Pen JjWMqdv by creativeocean (@creativeocean) on CodePen

 

Or a simpler approach as @mikel has suggested above that you could use morphSVG within a timeline and utilize as many shapes as desired (or an array or path data directly in js) at any duration you choose. You can even use morphSVG within GSAP keyframes also, there are many creative options available when using morphSVG.

[mikel]

 

... and a simple test

 

See the Pen XWzwgQV??editors=1010 by mikeK (@mikeK) on CodePen

 

Happy morphing ...

Mikel

 

 

[kodralex]

Thanks for all the super replies. @mikel a big thank you 👍 I took the code you had in your first post and pretty much did what was need from that. I'll take a closer look at the codepen you added above. This is really really helpful.

[mikel]

 

Just because it blobs so well ...

 

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

 

Happy morphing ...

Mikel