How to animate transform widget?

[prescientmoon]

I have some ideas, and I think the transform widget might be what I need. Before I dive into trying to use it, I just wanted to know if it can be animated.

Thanks in advance!

[viandoxdev]

AFAIK no, you could hack something by progressively updating a variable but it probably wouldn't be fluid. For animations in eww you've got revealers and (GTK) css transitions.

(Gtk4 has css transforms which would work, but it's gonna be a long time before eww switches to it because of things the gnome people don't want to support IIRC)

[elkowar]

Yea, gtk4 is still fucky due to wayland support. I do think that technically we could support some sort of transition for eww properties, maybe even something more or less generic (have some interpolation concept for any numeric attribute, allowing to animate basically anything?) -- performance would definitely not be comparable to actual css animations, as those are most definitely optimized on some way lower level, but especially for stuff that's only rarely done and is short (i.e. a short animation when switching workspaces or sth) it may be possible -- updating properties every 16ms to get 60fps should very much be possible, I'd think. However, I have no idea how the syntax for this could look currently...
Maybe this could somehow be done in simplexpr, via some sort of

(transform :rotate {animated(300, thingy-angle)} "foo")

which could just animate any change of thingy-angle to be interpolated over 300ms...
Not sure how viable implementing that is in the current codebase, either, tho ^^
Alternatively some sort of global def like a (definterpolated :duration "100ms" thingy-angle) might be more viable, although also significantly less pretty

[mantacid]

if you do go this route in the future of handling animations with yuck, might I suggest doing so in a way that matches the :geometry properties of windows? IMO It seems that that would allow for a lot of versatility.

[SwiftyChicken]

I was just messing around with eww and I discovered that transforms are actually implemented but they are called -gtk-icon-transform. You can use things like the scale, rotate and translate functions as if it was the usual translate property in the regular CSS. When using this with animation (and @keyframes) it will start the animation when the class is assigned to it. Using this fact you can just dynamically change the class name of the image widget with something like :class "${boolean-variable? animation-1: animatoin-2}" and then it will play animations everytime the boolean-variable changes (it doesn't seem to work if you change it to the same value). Here is an example:

in eww.yuck:

(defvar boolvar false)
(defwidget test
  (button :onclick "${EWW_CMD} update boolvar=${boolvar?false:true}"
  (image :class "${boolvar? 'a1':'a2'"
               :path "./path/image/im.svg")))

in eww.scss:

.a1{
 -gtk-icon-transform: rotate(0deg);
 animation: rot1 0.25 linear;
 @keyframes rot1 {
        from {
            -gtk-icon-transform: rotate(180deg);
        } to {
           -gtk-icon-transform: rotate(0deg);
        }
    }
}

.a2{
 -gtk-icon-transform: rotate(180deg);
 animation: rot2 0.25 linear;
 @keyframes rot2 {
        from {
            -gtk-icon-transform: rotate(0deg);
        } to {
           -gtk-icon-transform: rotate(180deg);
        }
    }
}

This code will make it so each time you click on the button the image will rotate 180 degrees back and forth.
Also note that you will need to set the -gtk-icon-transform: to the same as the one into the to{...} parentheses so that you can keep the transformation after the animation is done.

[SwiftyChicken]

I just noticed you can use transition: -gtk-icon-transform 0.25 linear instead of defining those keyframes and animation, does the same but with much cleaner css.