Jump to content
Search Community

Sprite Animation - (Not Working Properly)

SoL2Squiz test
Moderator Tag

Go to solution Solved by Dipscom,

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 am trying to do this Sprite Animation but cannot seem to figure out what's wrong with my code.

I've going back and forth on my image file, checking the sizes and all and etc but I cannot seem to find why it's not working as it should be.

 

Would be glad to get some help around.

 

 

Thanks

See the Pen MyEeLa by BUroKHUli (@BUroKHUli) on CodePen

Link to comment
Share on other sites

  • Solution

Hi SoL2Squiz,

 

Basically, your JS is failing because you are trying to load a JS file in CodePen that does not exist. 

<script src="js/main.js"></script> // This will fail in CodePen and break your Pen. Remove it and it will work.

Also, there is no need to add the CDN link in CodePen, you can add GSAP's library via CodePen's "Add External JavaScript" under the "Settings". Look for the button that says: "Quick-add".

 

After that, all that is left is to adjust your Tweening code. Look at the fork I made from your Pen, I also had to adjust some of your numbers that were a bit off.


See the Pen jqZPdm by dipscom (@dipscom) on CodePen

One last comment: If you are going to animate sprite sheets, you need to make sure the colors in the sprite sheet match exactly from one sprite to another. JPG is a rather bad file format for this as it creates slightly different shades of colors depending on the surrounding color per pixel. Look at the pen, watch how the graph flickers as it animates. You really want to use something like GIF or PNG for this sort of job.

  • Like 3
Link to comment
Share on other sites

Hi SoL2Squiz,

 

Basically, your JS is failing because you are trying to load a JS file in CodePen that does not exist. 

<script src="js/main.js"></script> // This will fail in CodePen and break your Pen. Remove it and it will work.

Also, there is no need to add the CDN link in CodePen, you can add GSAP's library via CodePen's "Add External JavaScript" under the "Settings". Look for the button that says: "Quick-add".

 

After that, all that is left is to adjust your Tweening code. Look at the fork I made from your Pen, I also had to adjust some of your numbers that were a bit off.


See the Pen jqZPdm by dipscom (@dipscom) on CodePen

One last comment: If you are going to animate sprite sheets, you need to make sure the colors in the sprite sheet match exactly from one sprite to another. JPG is a rather bad file format for this as it creates slightly different shades of colors depending on the surrounding color per pixel. Look at the pen, watch how the graph flickers as it animates. You really want to use something like GIF or PNG for this sort of job.

 

Hi,

 

Thanks for the info on "Quick-add" option for the CDN. That made a lot of sense. About the jpeg, yes you were right, in my final version, I used PNG format for each frame.

 

Thank you

Link to comment
Share on other sites

Hi SoL2Squiz :)

 

It looks like Dipscom has solved your sprite sheet problem, but I thought I'd throw my 2 cents worth out there for you.

 

Sometimes a sprite sheet may be the best solution, but you may want to look at SVGs for this type of animation. They offer so many advantages like responsive scaling, making easy changes to the text, smoother animations, color changes for your data... and the list goes on. In your example you have 12 pieces of text, some circles, a rectangle and one path. This works perfectly as a SVG. I made a little CodePen for you using the SVG instead of your sprite sheet. The SVG is about 3KB whereas the sprite sheet is 249KB and offers no way to change it.

 

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

 

Just my opinion, but hopefully it gives you some new ideas. 

 

Happy tweening

:)

  • Like 4
Link to comment
Share on other sites

Hi SoL2Squiz  :)

 

It looks like Dipscom has solved your sprite sheet problem, but I thought I'd throw my 2 cents worth out there for you.

 

Sometimes a sprite sheet may be the best solution, but you may want to look at SVGs for this type of animation. They offer so many advantages like responsive scaling, making easy changes to the text, smoother animations, color changes for your data... and the list goes on. In your example you have 12 pieces of text, some circles, a rectangle and one path. This works perfectly as a SVG. I made a little CodePen for you using the SVG instead of your sprite sheet. The SVG is about 3KB whereas the sprite sheet is 249KB and offers no way to change it.

 

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

 

Just my opinion, but hopefully it gives you some new ideas. 

 

Happy tweening

:)

Hi,

 

I'm a supernoob and after looking at your sample, I think I need a more coffee hehehehehe! I'm blown away :) Thanks

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