kodralex Posted March 8, 2022 Share Posted March 8, 2022 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 Link to comment Share on other sites More sharing options...
Cassie Posted March 8, 2022 Share Posted March 8, 2022 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! 5 Link to comment Share on other sites More sharing options...
kodralex Posted March 8, 2022 Author Share Posted March 8, 2022 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 Link to comment Share on other sites More sharing options...
mikel Posted March 8, 2022 Share Posted March 8, 2022 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 5 Link to comment Share on other sites More sharing options...
elegantseagulls Posted March 8, 2022 Share Posted March 8, 2022 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. 5 Link to comment Share on other sites More sharing options...
Shrug ¯\_(ツ)_/¯ Posted March 8, 2022 Share Posted March 8, 2022 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. 6 Link to comment Share on other sites More sharing options...
mikel Posted March 8, 2022 Share Posted March 8, 2022 ... and a simple test See the Pen XWzwgQV??editors=1010 by mikeK (@mikeK) on CodePen Happy morphing ... Mikel 5 Link to comment Share on other sites More sharing options...
kodralex Posted March 8, 2022 Author Share Posted March 8, 2022 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. 1 Link to comment Share on other sites More sharing options...
mikel Posted March 9, 2022 Share Posted March 9, 2022 Just because it blobs so well ... See the Pen ExbBNPz by mikeK (@mikeK) on CodePen Happy morphing ... Mikel 4 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now