I am working on a React project where I need to crop, rotate, zoom, and resize images, including animated GIFs.

I am using react-easy-crop for cropping and the Canvas API to generate the final output. This approach works well for static images (JPEG, PNG), but I am facing an issue with resizing animated GIFs:

Issue: When I resize a GIF using the Canvas API, only the first frame is rendered in the output, and the animation is lost.

What I Have Tried: Extracting frames using CanvasRenderingContext2D.drawImage(), but it only captures one frame.

Looking into JavaScript-based GIF processing libraries, but many require server-side processing or WebAssembly, which I want to avoid.

I referred to this example, but it does not handle GIF animations correctly.

What I Need Help With:

1️⃣ How can I extract, resize, and reconstruct all frames of an animated GIF on the client-side in JavaScript/React?

2️⃣ Is there a way to process GIFs efficiently without losing animation using the Canvas API or another browser-friendly approach?

I am looking for a technical explanation or code-based approach to solving this problem rather than just library recommendations. Any insights would be greatly appreciated!