Luna UI Documentation

The FadeUIElement class manages the fading in and out of a VisualElement.

Info: When fading a UIView, always use the public Fade variable provided by the UIView to ensure UI Actions work correctly. Typically, you should use this Fade rather than creating a custom instance.

Only create a custom Fade instance if you need to fade a VisualElement independently of UIView.

Constructor

csharp

public FadeUIElement(
  MonoBehaviour coroutineRunner, 
  VisualElement visualElement, 
  EasingMode easingMode = EasingMode.EaseOutCirc, 
  bool debug = false)

Name	Type	Description
coroutineRunner	MonoBehaviour	MonoBehaviour that handles running coroutines.
visualElement	VisualElement	The VisualElement to be faded.
easingMode	EasingMode	Defines the easing effect applied during fade transitions.
debug	bool	Logs fade transitions.

Public Properties

Property	Type	Description
IsFadingIn	bool	Returns `true` if a fade-in transition is currently active.
IsFadingOut	bool	Returns `true` if a fade-out transition is currently active.
IsFading	bool	Returns `true` if any fade transition is currently active (either in or out).

State Tracking Example

csharp

// Check if element is currently animating
if (myFade.IsFading)
{
    Debug.Log("Fade in progress, please wait...");
    return;
}

// Check specific direction
if (myFade.IsFadingIn)
{
    // Currently fading in
}
else if (myFade.IsFadingOut)
{
    // Currently fading out
}

Events

Event	Description
OnFadeInStart	Fired when a fade-in transition begins.
OnFadeIn	Fired when a fade-in transition completes.
OnFadeOutStart	Fired when a fade-out transition begins.
OnFadeOut	Fired when a fade-out transition completes.

csharp

// Subscribe to fade events
myFade.OnFadeInStart += () => Debug.Log("Starting fade in");
myFade.OnFadeIn += () => Debug.Log("Fade in complete");
myFade.OnFadeOutStart += () => Debug.Log("Starting fade out");
myFade.OnFadeOut += () => Debug.Log("Fade out complete");

Public Methods

FadeIn

Fades the element to full opacity.

csharp

public void FadeIn()

FadeOut

Fades the element to zero opacity.

csharp

public void FadeOut()

SetDuration

Sets the duration of fade transitions in seconds.

csharp

public void SetDuration(float seconds)

GetDuration

Returns the predefined duration of fade transitions. Note that it does not reflect the current active transition duration.

csharp

public float GetDuration()

SetEasing

Sets the easing function for fade transitions.

csharp

public void SetEasing(EasingMode easingMode)

SetFadeInDelay / SetFadeOutDelay

Sets a delay before the fade transition begins.

csharp

public void SetFadeInDelay(float seconds)
public void SetFadeOutDelay(float seconds)

SetDelay

Sets both the fade-in and fade-out delay at once.

csharp

public void SetDelay(float seconds)

GetFadeInDelay / GetFadeOutDelay

Returns the configured delay before the fade-in or fade-out transition begins.

csharp

public float GetFadeInDelay()
public float GetFadeOutDelay()

Stop

Stops the current fade transition immediately.

csharp

public void Stop()

Teardown

Tears down event subscriptions on the underlying VisualElement (stops any in-flight fade and cancels pending transition-end callbacks). Called by UIView.Dispose so the fade element doesn't keep the panel alive via stuck callbacks.

csharp

public void Teardown()

SetVisualElement

Swaps the underlying VisualElement. Used by UIViewComponent when its PanelRenderer has rebuilt its tree and the previously cached element is no longer in the live panel. Any in-flight fade is stopped — re-issue FadeIn/FadeOut against the fresh element afterwards.

csharp

public void SetVisualElement(VisualElement element)

Behavior Notes

Completion is event-driven, not timer-based. OnFadeIn / OnFadeOut fire off the USS TransitionEndEvent the moment the visual transition actually ends — which can be earlier than the configured duration when a fade interrupts an in-flight fade in the other direction and UITK retargets the transition. A duration-based fallback fires completion only if UITK silently collapsed the transition, and transient element detaches (the panel root can briefly detach under PanelRenderer on its first attach frame) do not prematurely complete the fade.
The first animated fade defers one frame. On the element's first fade after creation (or after SetVisualElement), and whenever the fade flips display from none to flex, the opacity write is deferred by one frame so UITK observes the from-state in isolation. Without the deferral, UITK would collapse the style changes into a single initial-state assignment and the CSS transition would silently skip. Zero-duration fades skip this entirely: they write opacity and fire completion synchronously.
FadeIn on an already-visible element still fires OnFadeInStart once. The first FadeIn after the element became visible fires OnFadeInStart even when opacity is already at target (e.g. a view revealed from behind a boot loader), so authored transitions still replay; it then completes synchronously with OnFadeIn. Subsequent FadeIn calls while the element is still at target opacity are no-ops; the guard resets when a fade-out completes. A FadeIn that interrupts an in-flight fade-out runs normally and fires OnFadeInStart again.

Example Usage

csharp

// Create a fade controller for a panel
var fadeController = new FadeUIElement(this, myPanel);
fadeController.SetDuration(0.3f);
fadeController.SetEasing(EasingMode.EaseOutBack);

// Add delay before fade out
fadeController.SetFadeOutDelay(0.5f);

// Subscribe to completion
fadeController.OnFadeOut += () => 
{
    Debug.Log("Panel hidden");
};

// Trigger fade out
fadeController.FadeOut();