FEATURE: Allow pausing animated images in posts (PR #12795)

This adds the ability to click on animated images to pause/unpause them. It doesn’t add a visual indicator yet, I’m not sure we need one. cc @awesomerobot

Like other libraries (freezeframe.js, for example), this stores the first frame of the animated image to a canvas (we’re limited to the first frame by browser security when images are stored on a different domain, like a CDN or S3) and displays that when paused.

Also, this will require a rebake to work for previously uploaded images.

GitHub

    it "does not optimize animated images but adds a class so animated images can be identified" do
        let images = post.querySelectorAll("img.animated");

I like it!

Should we automatically pause on window blur?

eg

1 Like

Yeah, that would be good. I was thinking we should also not pause gifs by default if the client is set to prefers-reduced-motion.