Animated gifs: Make it stop!

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. :pray:

18 Likes

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']

6 Likes

For sure I completely agree! Browsers used to support this as a native feature… read all about it here:

9 Likes

If you’re using Chrome, I recommend this extension:

3 Likes

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.

12 Likes

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.

5 Likes

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:

giphy-4

17 Likes

Looking great, a couple of minor recommendations:

  1. Maybe we do a small “paused” overlay, so people learn what happened. (a translucent II at the bottom right?)

  2. 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?

7 Likes

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 …

Thats So Raven Hello GIF by Cameo

3 Likes

Maybe we could have a setting which would show on hover of a gif along the “stop current gif” button:

  • autoplay gifs on/off (stored in session)
4 Likes

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.

4 Likes

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

2 Likes

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

10 Likes

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:

ed1bdf66998acb6fa9d93c4d8b318dbb07c15203

igor-bastidas-2

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.

3 Likes

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?

2 Likes

Maybe this? I am not sure there is anything to gain from lightboxing animated gifs…

7 Likes

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.

6 Likes

Sure, if disabling lightbox is easy for animated gifs, let’s do that. Should probably backport it as well!

3 Likes