macOS Terminal: Quickly convert screen recordings into gif for pull request examples

movtogif.sh

# Add in .zshrc file

# Usage: "movtogif example.mov" would output example.gif in the same directory
function movtogif() {
  # Gets file name without extension
  local NAME=$(echo "$1" | awk '{ print substr( $0, 1, length($0)-4 ) }')
  # Calculates width so that it doesn't have to be passed in
  local WIDTH=$(ffprobe -v quiet -print_format json -show_streams $1 | jq -r '.streams[0].width')
  # Creates filter for FFMPEG conversion. Change FPS here and in ffmpeg. They need to match
  local FILTER="[0:v] fps=50,scale=$WIDTH:-1,split [a][b];[a] palettegen [p];[b][p] paletteuse"
  ffmpeg -r 50 -hide_banner -loglevel error -i $1 -filter_complex $FILTER $NAME-temp.gif
  # Optimize gif
  gifsicle $NAME-temp.gif -O3 -o $NAME.gif
  rm $NAME-temp.gif
  # Calculates change in size from video and gif.
  local DELTA="$(awk -vn0=$(wc -c $1 | awk '{print $1}') -vn1=$(wc -c $NAME.gif | awk '{print $1}') 'BEGIN{ print int((1 - (n0/n1))*100) }')%"
  echo "Success: Created $NAME.gif ($DELTA)"
}

Useful when validating and documenting UI changes that require recordings, for example, hover or focus events in websites. My workflow is to record something, trim it to the minimum, then convert. To record with a screen selection on macOS, do cmd-shift-5 and select the screen record option. Entire thing usually takes less than 30 seconds.

Requires ffmpeg (brew install ffmpeg) and gifsicle (brew install gifsicle). Works best with small dimension and short videos.