Trim transparent pixels on the outer edge of an animated GIF

Question

Here is a transparent GIF that I made using Blender and Photoshop:

I'm happy with it, but I would like to trim out the transparent pixels that are unused around the ball throughout the animation to make the file lighter and easier to fit with other content in a webpage.

However, the animation has a variable height and width, so when I put it in Photoshop and select "Image > Trim > Transparent Pixels", it trims around one of the frames which doesn't work out because one single frame of the animation has a height and width that are not significant to the rest of the animation.

What is a workflow-friendly and easy way to trim out pixels outside the animated area of a GIF?

PS: Sorry for the epilepsy inducing GIF

Answer 1

Because of the way Photoshop works, when you crop an image it crops every layer the same size, and with the same x and y coordinates.

Therefore, you cannot crop every frame of this animation based on the content of only one layer. Your canvas has to be big enough to include the content of every single layer, no matter where the content is located and how big it is.

This means that you can only crop the content:

• to the left of frame 1
• above and below frame 15
• to the right of frame 34

The way I would do it would be to use guides to mark how much I can crop from all 4 sides and still include everything. I put a black background to show the guides better.

To the left of frame 1

Above and below frame 15

To the right of frame 34

You can then use the crop tool.

P.S.: If you want to really make the file as light as possible, you could also remove the duplicate frames; 1 and 60 are the same, and so are 30 and 31. You could delete frames 31 and 60, then double the duration of frames 1 and 30 to 0,06.

Answer 2

Not Photoshop, but you can do it very quickly at https://ezgif.com/crop

Upload the image, check Autocrop option and it will remove transparent pixels around the image.