Enable animation of offset with a tuple

[TomJGooding]

The docs say that "You can apply animations to styles such as offset to move widgets around the screen".

But how?

I found this discussion #1569 from back in January, which suggests this might be a bug?

from textual.app import App, ComposeResult
from textual.geometry import Offset
from textual.widgets import Footer, Static


class ExampleApp(App):
    BINDINGS = [("space", "animate_offset", "Animate Offet")]

    CSS = """
    Screen {
        align: center middle;
    }

    Static {
        background: red;
        width: auto;
        height: 3;
        content-align: center middle;
    }
    """

    def compose(self) -> ComposeResult:
        yield Static("Animate me!")
        yield Footer()

    def action_animate_offset(self) -> None:
        static = self.query_one(Static)
        static.styles.animate(
            attribute="offset",
            value=Offset(10, 10),  # crashes
            # value="10 10",  # crashes
            # value=(10, 10),  # crashes
            duration=0.5,
        )


if __name__ == "__main__":
    app = ExampleApp()
    app.run()

[github-actions]

Thank you for your issue. Give us a little time to review it.

PS. You might want to check the FAQ if you haven't done so already.

This is an automated reply, generated by FAQtory

[yuvalmo]

The problem seems to be trying to animate a propery of type ScalarOffset (offset) with a type of Offset.
I changed value to be a ScalarOffset then it worked for me.

from textual.app import App, ComposeResult
from textual.css.scalar import ScalarOffset  # <-- Changed import
from textual.widgets import Footer, Static


class ExampleApp(App):
    BINDINGS = [("space", "animate_offset", "Animate Offet")]

    CSS = """
    Screen {
        align: center middle;
    }

    Static {
        background: red;
        width: auto;
        height: 3;
        content-align: center middle;
    }
    """

    def compose(self) -> ComposeResult:
        yield Static("Animate me!")
        yield Footer()

    def action_animate_offset(self) -> None:
        static = self.query_one(Static)
        static.styles.animate(
            attribute="offset",
            value=ScalarOffset.from_offset((10, 10)),  # <-- Changed here
            duration=0.5,
        )


if __name__ == "__main__":
    app = ExampleApp()
    app.run()

This still leaves a few problems:

• The line I changed gets an error from the type checker, because value is expected to be str | float | Animatable.
• Using a tuple or string still doesn't work.

P.S. I used textual version 0.32.0.

[willmcgugan]

I think it should work in the way Tom intuited. If the ScalarOffset that @yuvalmo suggested works, then that might be a good workaround for now. But in the future it should really be as simple as animating to the tuple of two values.