Examples - rmfandyplayz/UnityUIAnimationTools GitHub Wiki

Recipes to copy. Each lists only the fields that matter; leave everything else at its default. "Empty" target means the player's own object.

Contents: Fade and pop in · Slide in from off-screen · Hover grow · Button press with a click · Cascading menu buttons · Attention pulse · Fullscreen shader transition · Score counter · Typewriter dialogue

Fade and pop in

The panel from Your First Animation. Needs a Canvas Group on the panel.

# Start Type From To Duration Ease
1 After Canvas Group Alpha Absolute 0 Absolute 1 0.25 Out Quad
2 With Scale Absolute 0.8, 0.8, 0.8 Baseline 0, 0, 0 0.25 Out Back

Right-click → Duplicate as Mirrored for the matching Hide.

Slide in from off-screen

Lay the panel out where it should end up.

# Start Type From To Duration Ease
1 After Anchored Position Baseline 0, -600 Baseline 0, 0 0.4 Out Cubic

Both values are Baseline, so this means "start 600 below where it normally sits, end where it normally sits". Move the panel anywhere in the scene and the animation still works. Mirror it for a slide out.

Hover grow

Two animations. Neither has a From, so each carries on from wherever the other left off, however fast the mouse moves. On both, set Interrupt Others to STOP: with the default COMPLETE, leaving half way through a Hover would first jump it to full size, then shrink from there.

Hover

# Type To Duration Ease
1 Scale Baseline 0.05, 0.05, 0 0.15 Out Quad

Unhover

# Type To Duration Ease
1 Scale Baseline 0, 0, 0 0.15 Out Quad

Play them from Pointer Enter and Pointer Exit, with an Event Trigger component or the SelectableEvents tool in this repo.

Button press with a click

Press, played from the button's On Click:

# Start Type Settings
1 After Play Sound Clip: your click, Pitch Variation 0.08
2 With Punch Scale Punch -0.1, -0.1, 0, Duration 0.25

If the button also has hover animations that scale it, set the punch's Target Path to a child (its Icon, say) instead: two steps scaling one object at the same time overwrite each other. See Sound for where the sound plays from.

Cascading menu buttons

One player on the menu, driving each button by Target Path:

# Start Type Target Path Delay From To Duration Ease
1 After Anchored Position Play 0 Baseline -300, 0 Baseline 0, 0 0.3 Out Cubic
2 With Anchored Position Options 0.05 Baseline -300, 0 Baseline 0, 0 0.3 Out Cubic
3 With Anchored Position Quit 0.1 Baseline -300, 0 Baseline 0, 0 0.3 Out Cubic

All three start together, and the small delays make them arrive one after another. Add a Graphic Alpha step With each for a fade too. Mirroring this gives a Hide where the last button to arrive is the first to leave.

[!NOTE] If the buttons sit in a Layout Group, it will fight the position steps. Animate a child inside each button instead, or animate the buttons' Canvas Groups.

Attention pulse

A gentle, endless throb on something the player should notice.

# Type From To Duration Ease
1 Scale Baseline 0, 0, 0 Baseline 0.08, 0.08, 0 0.6 In Out Sine

On the animation: Loops -1, Loop Type Yoyo, and untick Interrupt Others, so playing it doesn't stop the element's other animations (and they don't stop it, unless theirs is ticked). Stop it with StopAnimation.

Fullscreen shader transition

A fullscreen Image with your transition material, plus Add Component → UI Material Instance. The shader needs a float property, here called _Progress.

# Type Shader Property From To Duration Ease
1 Material Float _Progress Absolute 0 Absolute 1 0.8 In Out Quad

Load the next scene once it's covered the screen:

transition.Play("TransitionOut", () => SceneManager.LoadScene("Level2"));

See Material and Shader Properties.

Score counter

A TextMeshPro text showing only the number (put any label like "Score:" in a separate text).

# Type Property From To Format Duration Ease
1 Custom Property TextMeshProUGUI → string text (as number) (off) Absolute 0 N0 0.6 Out Quad

With From off, it counts on from whatever number is showing. Give it the real score from code:

anim.SetTo("CountUp", 0, score);
anim.Play("CountUp");

N0 shows thousands separators (1,500). See Custom Property.

Typewriter dialogue

# Type Property From To Duration Ease
1 Custom Property TextMeshProUGUI → string text (typewriter) Absolute "" (empty) Absolute "" 1.5 Linear

Hand it each line from code:

anim.SetTo("Say", 0, "Welcome, traveller.");
anim.Play("Say");

The whole line takes the step's Duration however long it is. Rich-text tags like <b> are never shown half-typed. See Custom Property for other ways to type out text.