Effects
Dock Magnifier
A dock style hover magnification effect for UI elements
Overview
Dock Magnifier scales UI elements near the pointer to create a dock style magnification effect. When the pointer moves across the parent container, nearby child elements grow smoothly based on their distance, then relax back to their base size when the pointer leaves.
Usage
Place your UI elements (for example, buttons or icons) as direct children of a parent RectTransform
Add the Dock Magnifier component to the parent object
Adjust magnification settings such as maximum scale, radius, and smooth time
Dock Magnifier will automatically:
- Resize children based on pointer distance while hovering
- Smoothly return children to their base size when the pointer exits
Properties
| Name | Type | Description |
|---|---|---|
maxScale | float | Maximum scale multiplier applied to elements closest to the pointer |
baseScale | float | Base scale multiplier used when there is no magnification (1 means original size) |
influenceRadius | float | Radius in parent local space that controls how far the magnification effect reaches |
axisBias | float | Widens the influence along the main axis, making the effect stretch more horizontally or vertically depending on orientation |
smoothTime | float | Time used by smooth damping when resizing elements, affecting how quickly the size changes |
orientation | Orientation | Determines how distance is computed: Horizontal, Vertical, or Free (no axis bias) |
alwaysUpdateOnHover | bool | While hovering, refreshes the pointer position every frame from the current mouse position. Helps keep magnification synced while scrolling a ScrollRect |
requirePointerInsideForRefresh | bool | When true, pointer refresh from mouse position only happens if the cursor is inside the parent RectTransform |
ScrollRect Integration
If the Dock Magnifier parent is inside a ScrollRect:
- The component listens to
onValueChangedon the ScrollRect - While hovering, it refreshes the pointer position after scroll updates
- This keeps the magnification aligned with the visual position of items as the content moves
If you see desync when scrolling, make sure:
alwaysUpdateOnHoveris enabledrequirePointerInsideForRefreshis set according to whether you want updates only while the cursor is inside the dock
Code Example
using UnityEngine;
using Evo.UI;
public class DockMagnifierExample : MonoBehaviour
{
public DockMagnifier dockMagnifier;
void Awake()
{
// Basic configuration
dockMagnifier.maxScale = 1.7f;
dockMagnifier.baseScale = 1.0f;
dockMagnifier.influenceRadius = 140f;
dockMagnifier.smoothTime = 0.06f;
// ScrollRect friendly behavior
dockMagnifier.alwaysUpdateOnHover = true;
}
}