What's happening here?

This example demonstrates UIMicro transformations and interactive animations. UI elements can be animated independently of constraints using micro transformations. Click on the buttons to see GSAP-powered scale animations using the micro transformation system.

// Make layer and button interactive
layer.mode = UIMode.INTERACTIVE;
button.mode = UIMode.INTERACTIVE;

// Add click animation using micro transformations
button.on(UIElementEvent.CLICK, () => {
  // Micro transformations are independent of constraints
  // They allow animations without affecting layout
  gsap
    .timeline()
    .to(battle.micro, {
      y: -35,
      scaleX: 0.85,
      duration: 0.125,
      ease: "power1.out",
    })
    .to(battle.micro, {
      y: 0,
      scaleX: 1,
      duration: 0.25,
      ease: "back.out",
    });
});
💡 Interactive Animations: Click on the buttons to see micro transformations in action. These animations are independent of the constraint system.
📦 Third-party Library: This demo uses GSAP for animations. GSAP is not part of Laymur and can be installed separately. GSAP has its own license - please check GSAP licensing for commercial use.