A discussion on the topic “Animated gifs: Make it stop!” began with ganncamp requesting a feature to stop animated GIFs from playing continuously. jesus2099 suggested using a browser extension to hide animated GIFs, while codinghorror recalled that browsers used to support a native feature to stop GIF animations.
pmusaraj implemented a feature that allows users to pause animated GIFs by clicking on them. However, this feature only works for locally uploaded GIFs and not for external links. geoff777 reported issues with the feature, which pmusaraj explained were due to the GIF not being locally uploaded.
sam suggested adding a “paused” overlay to indicate when a GIF is paused, and pmusaraj added play/pause icons and a subtle background color to the canvas element.
The discussion also touched on the issue of lightboxing animated GIFs, with codinghorror pointing out that it can be awkward. pmusaraj suggested disabling lightboxing for animated GIFs, which was later implemented (pmusaraj).
Additionally, awesomerobot reported an issue with playing de-spoilered GIFs, which pmusaraj addressed by disabling lightboxes and pausing animated images inside spoiler elements. seanblue emphasized the importance of maintaining the toggle behavior for spoilers, and pmusaraj implemented a fix that makes blurring one-way for elements with their own click actions.
When people post animated gifs they play over and over and over and over and over and…
Twitter gives me a way to make the animation stop. Slack lets me collapse the image so I don’t see it anymore. Please, please Discourse give me something comparable. 
You could use Stylus to change the style (display: none or visibility: hidden) of all animated GIF:
div.topic-body div.lightbox-wrapper > a.lightbox > img[src$='.gif']
For sure I completely agree! Browsers used to support this as a native feature.. read all about it here:
If you’re using Chrome, I recommend this extension:
Just a tiny update.
There is so much YES in this topic, in fact I had the exact same feeling earlier today when someone posted a GIF.
@pmusaraj is working on feature here and will update us when it is ready.
It’s a shame that browsers pulled their support for esc to stop all page animation on GIFs. People forget.. but this really was a thing.
Great feature request @ganncamp, thank you. This is now done (commit) and deployed here on meta. Clicking on the image will pause and then unpause the animation. Due to browser security limitations, the pausing shows only the first frame of the image, it can’t show the frame on the moment it was clicked.
Here’s an obligatory GIF to try it out:
Looking great, a couple of minor recommendations:
Maybe we do a small “paused” overlay, so people learn what happened. (a translucent II at the bottom right?)
I think, (though I am not sure) that this only works after the gif fully loaded. Some animated gifs can take a while to load. Can you test maybe on local using throttling to see that this pauses even if the gif is not fully loaded?
Some weird behaviour I noticed here on Meta.
I posted a gif here https://meta.discourse.org/t/badges-and-general-chattiness-of-discourse/187971/19?u=geoff777
It wouldn’t pause. I tried two browsers.
I came to this thread as I’d read it the other day.
Clicked on the STOP IT gif and it paused.
Back to my post and that now pauses.
so …
testing testing testing …
Maybe we could have a setting which would show on hover of a gif along the “stop current gif” button:
Thanks Geoff, the technical reason why your upload doesn’t work is because this currently only works for uploads that are in the DB. Your upload above is a giphy URL, it doesn’t have a local upload record. We can’t easily extend this to animated images from other URLs because we don’t know for sure if an asset on a specific URL is an animated image or a regular static image.
We can make an educated guess, for giphy URLs for example, but unless the upload is local and processed, we won’t know for sure.
Update: ah, and now the giphy upload in your post above was downloaded locally, and the pausing works.
The gif I posted above won’t pause atm
Then there was a refresh and it does.
I’m guessing now this non-pause issue is just for the gif poster and fixes with a refresh.
Edit - sorry just reading your post above @pmusaraj
Yes that makes sense. It pauses when it is available locally.
So for a short time the pause feature won’t work. Good to know. Thanks
The pause action works, but the canvas can’t read/draw the first frame until the GIF has fully loaded. I don’t think we can properly fix this, so I added a subtle background color to the canvas element, which will display like this:
I also added play/pause icons and a few other improvements.
https://github.com/discourse/discourse/pull/12839
This topic was automatically closed after 6 days. New replies are no longer allowed.
Lightboxing gets in the way, as you can see here. Compare and contrast behavior by clicking / tapping on the below animated GIFs:
It kinda-sorta works on the second one, with the caveat that the lightbox expansion and contraction absorbs one of the clicks to pause/unpause.
Yeah @pmusaraj going to reopen this, we probably want better handling for cases where an animated gif is lightboxed it is very awkward now.
Not sure what the right thing is to do? not lightbox animated gifs? have different click areas for “pause” vs “full size” for these cases?
Maybe this? I am not sure there is anything to gain from lightboxing animated gifs…
I guess technically you could have a gigantic animation to show off.
Maybe we just disable the lightbox for now and see if anyone complains? Agree entirely that it usually is bad news and useless for animated gifs.
Sure, if disabling lightbox is easy for animated gifs, let’s do that. Should probably backport it as well!
