CSS Animations

[jmrepetti]

Hello everyone:

I started using Niri and end up customizing Waybar too much. I love it. I think there should be Waybar Jam day.

I wanted to display some animations based on a PNG sprite-sheet. Wait, my first attempt was to write a CFFI module, in GO, pf I died so I went back with C, simple. I was able to display an animation (the same animation you can see below) by reading fragments from a Pixbuf, and it worked. The only "problem" is that Waybar starts consuming a bit more CPU, around 5%. I thought I was doing something wrong; after all, showing an animated sprite on Waybar is just decoration. You might find some utility, perhaps changing the animation based on events. I don’t know.

Then I thought, what could CSS do for me? I was able to set a background image from a URL, define some keyframes, and voila! It worked perfectly. I’m not sure I’ll use this, but it’s possible.

One or two things, Waybar consume a bit more of CPU when doing animations whether using de CFFI module or CSS animation. Probably is normal.

The other thing is that you can load an image from a remote URL, maybe we have to be careful when loading this resoruces, or is just me paranoid. Anyway here is the code:

The module is just a place holder:

  "custom/anim": {
    "format": " ",
    "tooltip": false,
  },

And the style:

@keyframes idle {
  to { background-position: -128px 0px; }
}

@keyframes running {
  to { background-position: -255px 64px; }
}

#custom-anim:hover {
  background-position: 0px 0px;
  animation: idle 0.75s steps(4) infinite;
}

#custom-anim {
  min-width: 32px;
  min-height: 32px;
  background-color: rgba(28, 33, 34, 0.735);
  border-radius: 6px; /* These modules are always rounded */
  margin: 5px 5px; 
  background-image: url("https://raw.githubusercontent.com/hajimehoshi/ebiten/refs/heads/main/examples/resources/images/runner.png");
  background-position: 0px 64px;
  animation: running 0.75s steps(8) infinite;
}

How it looks:

running.mp4

[jmrepetti]

By the way, you can do this in the whole bar. Noice.

[jmrepetti]

Just read the Styling section now.