Animated GIF as Button Icon

Until the native feature is present, i would like to share how to put some "little" animated gif as an icon on a widget button...

# Using ImageMagick
# convert animation.gif /tmp/test/target.png
# On Widget set the execution delay on 0.1 and set "show only icon"
tell application "BetterTouchTool"

    set numFrames to 10
    set startFrame to 0
    set basePath to "/tmp/test/"
    set baseName to "target-"
    set extension to ".png"
    # uuid -
    set widgetId to "A49899D3-ED6F-4EC5-B9C2-CC0E8E09CDA8"

    set varName to "anim-" & baseName & "frame"
    set frame to ((get_number_variable varName) as integer)
    on error
    set frame to startFrame
    end try
    if frame > numFrames then
    set frame to startFrame
    end if
    set_persistent_number_variable varName to frame + 1

    set fileName to baseName & (frame as string) & extension
    set fullFilePath to basePath & fileName
    update_touch_bar_widget widgetId text " " icon_path fullFilePath

end tell

A simple example...

Follow the steps:

  1. First, select your awesome animated gif... audio and save into any folder (example: /tmp/myGifs/awesome.gif)

  2. Using the "console", execute the command.
    #> cd /tmp/myGifs
    #> convert awesome.gif awesome.png

    Note: you have to make sure that the imageMagick binary are installed on your machine (link)

  3. Add a new Widget and select "Run Apple Script..."

  4. Copy the script and paste on the window that appear. Don't forget to put a name and put some tiny value on the "Execute every x seconds" parameter.


  5. Now we need to customize the script. First grab the UUID of the component using the "right click" over the new component (to obtain the context menu) and select the "Copy UUID..." option.

  6. Edit the script (double click on the component) and replace (paste) the new UUID on the "widgetId" variable.

  7. Configure the other variables:
    numFrames = The number of frames of the animated gif (see how many files generate after the convert command execution, in our example is 31)
    startFrame = The first frame you want to show (normally is 0)
    basePath = The location of your frame files (make sure you put the last backslash)
    baseName = The base name for the images-frames generated by the convert command (in our example is "awesome-")

  8. Last, set the "Show only icon" on the "Appearence & Settings" properties of the button... and play with the rest as you like...

I think that is...enjoy!!

Great! keeping this for future reference!

That is cool! I really hope Animated gifs become a native future soon.

@Cesar_Pasache would you mind sharing a preset with an animate d.Gif inside?
That would be great.

Does BTT support apng format?
apng is a derivative from png and support animation.

Your tip is great but gif is old school internet, apng support more colours and other things.