Jump to content

Search In
  • More options...
Find results that contain...
Find results in...
Tom Roberts

Creating animation from a png sequence - HOW?

Recommended Posts

HI Greensockers!

Happy New Year to you all (I know it's a little late but it's heartfelt in these odd days!)


I have a sequence of png files that I want to animate into a sprite sheet but I am not sure of the best way to do it.

Does anyone have any codepen examples or suggestions on the best way to achieve the animation?

Is it better to have a series of individual images (currently 120 images/frames) or to have one long spritesheet image containing all frames?


I dont have a codepen to show an example as I am not sure on the best method to start creating this spritesheet animation so ALL suggestions are welcomed!


Many thanks



Link to comment
Share on other sites


  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Also this thread talks about a lot of options for creating this sort of thing:


  • Like 2
  • Thanks 1
Link to comment
Share on other sites

  • 2 weeks later...

If you have 120 PNG images, the file size would probably become quite large. Why don't you create an MP4 video instead?

First, name your images padded with zeros. For example, pic0001.png, pic0002.png, etc. Then, run this ffmpeg command:


ffmpeg -r 60 -f image2 -s 1920x1080 -i pic%04d.png -vcodec libx264 -crf 25 -pix_fmt yuv420p test.mp4


If you don't have ffmpeg, you can download it here: https://ffmpeg.org


Perhaps this is not the solution you're looking for, but since you said ALL suggestions are welcome :)

  • Like 2
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.