Animation

Perry supports animating widget properties for smooth transitions.

Opacity Animation

import { Text } from "perry/ui";

const label = Text("Fading text");

// Animate opacity from current to target over duration
label.animateOpacity(0.0, 1.0); // targetOpacity, durationSeconds

Position Animation

import { Button } from "perry/ui";

const btn = Button("Moving", () => {});

// Animate position
btn.animatePosition(100, 200, 0.5); // targetX, targetY, durationSeconds

Example: Fade-In Effect

import { App, Text, Button, VStack, State } from "perry/ui";

const visible = State(false);

App("Animation Demo", () =>
  VStack([
    Button("Toggle", () => {
      visible.set(!visible.get());
    }),
    (() => {
      const label = Text("Hello!");
      label.animateOpacity(visible.get() ? 1.0 : 0.0, 0.3);
      return label;
    })(),
  ])
);

Platform Notes

Next Steps

• Styling — Widget styling properties
• Widgets — All available widgets
• Events — User interaction