question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Auto-detect animated sources

See original GitHub issue

Currently, if you want animated output you need to specifically choose it. It would be good if animated webp input images could automatically generate animated output. I’m not sure what the overhead would be of just passing animated to the sharp constructor every time.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:18 (12 by maintainers)

github_iconTop GitHub Comments

3reactions
lovellcommented, May 4, 2022

If you hadn’t already seen, support for resizing and cropping animated GIF and WebP images was added in sharp v0.30.0.

https://sharp.pixelplumbing.com/changelog

const data = await sharp('in.gif', { animated: true })
  .resize({ width: 128, height: 128 })
  .toBuffer()
2reactions
lovellcommented, Jun 21, 2022

Is there any reason to not always pass animated: true when optimizing images?

@pi0 Always passing animated: true looks like the right approach for the scenarios ipx supports.

Is there any way to get the number of pages in a gif, or the individual page height, after it is converted to a Buffer from within the callback?

@tgcallaway Not directly at the moment. Adding pageHeight to the info object in the response would make a good improvement - please feel free to open an enhancement issue for this.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to Create Custom Animations For Your Sources With ...
While you can purchase animated overlay packages from designers, Better Motion gives you complete control to customize and animate your sources to your...
Read more >
Popmotion: The animator's JavaScript toolbox
The animator's JavaScript toolbox. PowerfulSupports keyframes, spring and inertia animations on numbers, colors, and complex strings.
Read more >
Using schema auto-detection | BigQuery - Google Cloud
In the Google Cloud console, in the Schema section, for Auto detect, check the Schema and input parameters option. In the bq command-line...
Read more >
Animating gAnime with StyleGAN: The Tool | by Nolan Kent
In-depth tutorial for an open-source GAN research tool ... for animation; Read and process feature maps to automatically detect meaningful ...
Read more >
A Comparison of Animation Technologies - CSS-Tricks
It also stops running when a tab is inactive, to keep from using resources unnecessarily. For this reason, requestAnimationFrame is a really ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found