Converting animated images (PNG, GIF, WebP) loses animation in output file

[AlexanderTheGrey]

Possible bug

Is this a possible bug in a feature of sharp, unrelated to installation?

• [ X] Running npm install sharp completes without error.
• [ X] Running node -e "require('sharp')" completes without error.

If you cannot confirm both of these, please open an installation issue instead.

Are you using the latest version of sharp?

• [ X] I am using the latest version of sharp as reported by npm view sharp dist-tags.latest.

If you cannot confirm this, please upgrade to the latest version and try again before opening an issue.

If you are using another package which depends on a version of sharp that is not the latest, please open an issue against that package instead.

What is the output of running npx envinfo --binaries --system --npmPackages=sharp --npmGlobalPackages=sharp?

System:
OS: macOS 10.15.7
CPU: (6) x64 Intel(R) Core(TM) i5-8500B CPU @ 3.00GHz
Memory: 16.41 MB / 16.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
npm: 8.5.0 - ~/.nvm/versions/node/v16.14.2/bin/npm
npmPackages:
sharp: ^0.30.6 => 0.30.6

What are the steps to reproduce?

Convert a GIF file to WebP using the macOS libvips binaries. The resulting WebP file will have no pages in the metadata even if the animated: true or pages: -1 option is used, instead of the same number of pages as the original GIF file.

Convert an animated WebP file to PNG/GIF using the macOS libvips binaries. The resulting PNG/GIF file will only have one page if the animated: true or pages: -1 option is used, instead of the same number of pages as the original animated WebP file.

What is the expected behaviour?

The animated image file should convert correctly to another file format that supports animated images, with the correct number of pages in the converted file's metadata.

Please provide a minimal, standalone code sample, without other dependencies, that demonstrates this problem

To WebP:

`sharp(input.gif)
    .image.webp({ animated: true })
    .toFile(output.webp, (err) => {
              if (err === null) {
                console.log("Success");
              } else {
                console.log("Error")
              }
            });

To animated PNG:

`sharp(input.webp)
    .image.png({ animated: true })
    .toFile(output.png, (err) => {
              if (err === null) {
                console.log("Success");
              } else {
                console.log("Error")
              }
            });`

To GIF:

`sharp(input.webp)
    .image.gif({ animated: true })
    .toFile(output.gif, (err) => {
              if (err === null) {
                console.log("Success");
              } else {
                console.log("Error")
              }
            });`

Please provide sample image(s) that help explain this problem

https://en.wikipedia.org/wiki/GIF#/media/File:Rotating_earth_(large).gif

[lovell]

Hi, the animated property is part of the constructor.

https://sharp.pixelplumbing.com/api-constructor

- sharp(input.gif)
-    .image.webp({ animated: true })
+ sharp(input.gif, { animated: true })
+    .image.webp()

[AlexanderTheGrey]

Oh, thank you, it works now. Is it okay to leave the animated: true option on for non-animated images? Or can I somehow conditionally turn off the animated option if the metadata detects that the pages object of a static image file is undefined?

[AlexanderTheGrey]

Also, when I use the animated: true option for converting a GIF/animated WebP to animated PNG, it does not animate the PNG image, and instead just creates one large image with all of the frames in a column.

[lovell]

Is it okay to leave the animated: true option on for non-animated images?

Yes.

Please see #2375 for APNG.

[AlexanderTheGrey]

Great, thanks for the quick answer.