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",
});
});