Does this only support 90/180/270-degree rotations?

No, any finite angle is supported. 90/180/270 degrees are simply the special cases where the rotated bounding box exactly matches (or cleanly swaps) the source dimensions with no partial pixels at the edges; they fall out of the same general formula, not a separate code path.

Why does the canvas size change after rotating?

Rotating a rectangle (except by exact 180-degree turns) produces a differently-shaped bounding box. The canvas expands to fit the full rotated content so no corner gets clipped, leaving newly exposed area transparent.

Does every frame rotate the same way?

Yes, the same angle is applied to every frame around its own center, keeping the whole animation's rotation consistent.

Will rotated straight edges look perfectly smooth?

At non-90-degree-multiple angles, edges are sampled with nearest-neighbor interpolation, which keeps hard pixel edges crisp but can show slight jagged stepping rather than an anti-aliased smooth line.

GIF Rotator - Rotate an Animated GIF by Any Angle

Overview

Introduction

Rotating an animated GIF means spinning every frame consistently around its center, whether by a clean 90-degree turn or an arbitrary custom angle.

This tool decodes each frame, rotates it, and re-encodes a new animated GIF from the rotated frames, entirely in your browser.

What Is GIF Rotator?

A client-side tool that rotates every frame of an animated GIF clockwise by a chosen angle in degrees, expanding the output canvas to fit the full rotated bounding box so no content is clipped at the corners.

It supports any finite angle, from a quick 90-degree turn to arbitrary custom rotations.

How GIF Rotator Works

For a given rotation angle, the tool first computes how large the output canvas needs to be to contain the source rectangle's full rotated bounding box.

Then, for every pixel in that (typically larger) output canvas, it maps backward through the inverse rotation to find the corresponding source pixel and copies its color with nearest-neighbor sampling, leaving any position with no corresponding source pixel transparent. This runs once per decoded frame, and all rotated frames share the same output canvas size before re-encoding.

When To Use GIF Rotator

Use it to correct a sideways- or upside-down-recorded animated GIF with a clean 90/180/270-degree turn.

It's also useful for custom-angle creative effects, like a slightly tilted animated sticker or badge.

Often used alongside GIF Flipper, GIF Skewer and GIF Canvas Size Changer.

Features

Advantages

Supports any angle, not just fixed 90-degree steps, through one general formula.
Automatically expands the canvas so rotated corners are never clipped.
Applies the exact same rotation to every frame, keeping the whole animation visually consistent.

Limitations

Nearest-neighbor sampling can leave slightly jagged edges at non-90-degree-multiple angles.
Non-90-degree rotations increase the canvas size (and therefore file size), since the bounding box of a tilted rectangle is always larger than the rectangle itself.

Examples

Rotating a sideways-recorded GIF upright

Input

A 400x300 animated GIF recorded sideways, rotate 90 degrees clockwise

Output

A 300x400 animated GIF with every frame rotated upright

A 90-degree rotation swaps width and height exactly, producing a clean upright result with no transparent padding needed.

Best Practices & Notes

Best Practices

Prefer exact 90/180/270-degree rotations when possible; they produce the cleanest results with no partial-pixel edges or extra transparent padding.
After an arbitrary-angle rotation, consider gif-canvas-size-changer or gif-cropper to trim the expanded transparent canvas if you don't want it.
Preview the rotated result to confirm no important content sits right at the new, larger canvas edges.

Developer Notes

rotateGif in gif-rotator.ts mirrors png-rotator.ts's expand-and-inverse-sample rotation math exactly, applied per decoded GIF frame via the shared transformGifFrames helper. Every frame is guaranteed to compute the same output canvas size from the same source dimensions and angle, satisfying the shared encoder's requirement that all frames share one canvas size.

GIF Rotator Use Cases

Correcting a sideways- or upside-down-oriented animated GIF recording
Creating a rotated, tilted-angle stylistic variant of an animated graphic
Preparing rotated frame variants for a sprite sheet or animation preview

Common Mistakes

Expecting the output canvas to stay the same size as the input after a non-180-degree rotation; it generally grows to fit the rotated bounding box.
Rotating by a near-but-not-exact 90-degree-multiple angle and getting slightly jagged edges instead of the clean swap a true 90-degree rotation gives.

Tips

If you only need an upright/sideways correction, stick to exact 90/180/270-degree values for the cleanest result.
Combine with gif-flipper if you need both a rotation and a mirror to fully correct an orientation issue.

GIF Rotator