TweetDeck can play GIFs for a while now. That's nice. It does, however, automatically start playing them as soon as they are in view. That's less nice, especially if you have multiple columns on a large screen - distraction ensued.

As you may expect, however, this can be fixed with a bit of JavaScript.

The general idea is as following:

• Every now and then, iterate over not-yet-checked GIF containers.
  This is done via querySelectorAll. Using MutationObserver could be a better idea, but dynamically assigning listeners on right elements ins a challenge.
• GIFs that are already paused are ignored.
• GIFs in "full tweet" containers" are ignored.
• Attempt to pause the GIF.
  If that succeeds, mark the GIF as "checked" (to not loop over it again).
  Otherwise (no pause button / failed to pause), leave it alone till the next check.

This translates straightforwardly into a snippet of code:

setInterval(function() {
    var nodes = document.querySelectorAll(
        ".js-media-preview-container.is-gif:not(.cc_yal_tweetdeck_gif_autopause)"
    );
    for (var i = 0; i < nodes.length; i++) {
        var node = nodes[i];
        if (!node.classList.contains("is-manually-paused")
        && !node.parentElement.classList.contains("detail-preview")) {
            var pauseButton = node.querySelector(".gif-pause");
            if (!pauseButton) continue;
            pauseButton.click();
            if (!node.classList.contains("is-manually-paused")) continue;
        }
        node.classList.add("cc_yal_tweetdeck_gif_autopause");
    }
}, 500);

You could simply paste the above into JavaScript console, or use a userscript extension (GreaseMonkey for Firefox, TamperMonkey for Chrome, etc.) to set it up to run automatically when you load TweetDeck. For convenience, a pre-assembled script is available too.

Have fun!

Update: current versions (>= May 9, 2017) of TweetDeck spot a setting for this in General tab of Settings, so this post is mostly an example of processing TD items, I guess.

Related posts:

• Binary operations with lists on Twitter web
• Rectangle-circle intersection test
• Understanding isometric grids
• Top-down bouncing loot effects
• GameMaker: Loading bar + logo/image in HTML5