ui
[UI Toolkit] Fix Progress Bar Gradient Clipping and Opacity Sequencing
Solution
Unity 2021.3.x - Unity 6.3.x
Published Tue, Mar 17
When implementing progress bars in UI Toolkit, background gradients often bleed through the fill element during opacity transitions. Common attempts to bind progress to style.width result in element squishing, while simultaneous parent-child fading exposes internal gradients prematurely before the fill reaches full opacity.
To resolve visual artifacts during UI transitions, the fill element must be handled independently from the container’s layout logic:
- De-parent your bar fill from its container for independent styling and alpha control.
- Assign your bar fill a position of
absolutein the USS to place it precisely over the background gradient. - Define separate ‘active’ USS classes for both the container and your bar fill with defined
transition-duration. - Trigger the container transition first and monitor its
resolvedStyle.opacityin your script. - Apply the ‘active’ class to your bar fill only after the container is fully opaque.
Additional Tips:
- Utilizing
Length.Percentforstyle.widthprevents layout distortion during progress updates. Coroutinelogic is generally more reliable thanTransitionEndEventwhen multiple style properties are animating simultaneously.- Ensure
picking-modeis set toIgnoreon fill elements if they should not intercept pointer events to maintain an accurate position for raycasts.
TL;DR
Ensure clean position transitions by de-parenting the fill VisualElement and utilizing Coroutine sequencing to manage alpha states independently.
Related Posts Haven't quite found a solution to your problem? We think these posts might help you.
[UI Toolkit] Animate Tiled Background Scrolling[Localization] Fix Arabic Glyph Shaping in String Tables[AccessibilityNode] Optimize Screen Reader Interactions
Content inspired by a Unity discussion post.