Overview
Introduction
A shear (skew) transform slants an image along one or both axes, turning straight rectangular edges into parallelograms. This tool applies the same shear to every frame of an animated GIF so the whole animation slants consistently.
Everything happens client-side: the GIF is decoded, each frame is sheared, and a new animated GIF is re-encoded from the result.
What Is GIF Skewer?
A client-side GIF skew tool that applies independent horizontal (X) and vertical (Y) shear angles to every decoded frame, expanding the canvas to fit the sheared parallelogram without clipping any content.
It uses inverse-mapping nearest-neighbor sampling: for each output pixel, it computes which source pixel would have landed there before the shear, the same approach this category's rotator uses.
How GIF Skewer Works
For a given X/Y skew angle pair, the tool first computes where the source rectangle's four corners land after shearing, which determines how much bigger the output canvas needs to be to contain the whole sheared shape.
Then, for every pixel in that expanded output canvas, it maps backward through the inverse shear to find the corresponding source pixel (if any) and copies its color, leaving areas with no corresponding source pixel fully transparent. This runs once per frame, all frames sharing the same canvas size.
When To Use GIF Skewer
Use it for stylized effects: an italic-text-like slant, a faux-3D "leaning" look, or a deliberately distorted animated sticker.
It also pairs with gif-unskewer when you need to correct a GIF that was captured or exported with an unwanted slant.
Often used alongside GIF Unskewer, GIF Rotator and GIF Swirl Effect Applier.
Features
Advantages
- Applies one consistent shear to every frame so the whole animation slants together without frame-to-frame drift.
- Expands the canvas automatically so no content is clipped by the shear.
- Runs entirely client-side with no upload to any server.
Limitations
- Angles are limited to between -89 and 89 degrees; a full 90-degree shear is mathematically degenerate (it collapses the image to a line).
- Nearest-neighbor sampling can leave visible jagged edges on sheared straight lines, especially at larger angles.
Examples
Best Practices & Notes
Best Practices
- Start with a small angle (10-20 degrees) and preview before committing to a more extreme shear.
- Remember the exact angle you use if you might need to reverse it later with gif-unskewer.
- Combine with gif-canvas-size-changer afterward if you want to trim the expanded transparent canvas back down.
Developer Notes
skewGif in gif-skewer.ts mirrors png-skewer.ts's forward-corner-projection + inverse-sampling math exactly, just run per decoded GIF frame through the shared transformGifFrames helper instead of once on a single PNG. gif-unskewer.ts imports this function directly and negates both angles rather than re-deriving the shear math.
GIF Skewer Use Cases
- Creating a stylized, italic-leaning animated sticker or badge
- Producing a faux-3D "leaning card" animation effect
- Correcting or exaggerating perspective-style distortion on an animated graphic
Common Mistakes
- Requesting an angle close to 90 degrees and getting a degenerate-shear error; keep angles well within the -89 to 89 range.
- Forgetting that the output canvas is larger than the input, which can surprise downstream tools expecting the original dimensions.
Tips
- If you only want a vertical lean, set skewX to 0 and only adjust skewY (or vice versa).
- Pair with gif-unskewer to precisely reverse a specific shear angle later.