May differ slightly from the actual interface.
This setting applies to the animation
Hover
May differ slightly from the actual interface.
Key Point:
Select the animation applied on Hover. This setting creates responsive feedback for the user.
What this changes:
Visible changes help users recognize the element as interactive.
Adjustment tips:
Choose a short, subtle animation that does not sacrifice readability for a practical result.
Settings
- Animation Preset selection: Select how the text moves. Start with a subtle effect to prioritize readability. Options include
none(off) and various Hover animation patterns.
Text Animation activates only on Hover. Because text may temporarily lose readability during the animation, a short Duration is recommended. When combined with the Style Settings Transition, both Duration / Delay values can add up and create a perceived lag. When an animation is active, a notice appears in the Style Settings Transition panel.
30-character limit:
Text Animation internally wraps each character in a<span>and applies per-character delay. This delay is generated for up to 30 characters only. Characters beyond the 30th will animate all at once without individual delays.Character wrapping optimization:
When Text Animation is set tonone, the per-character<span>wrapping is omitted for performance optimization. Wrapping is automatically applied as soon as an animation is enabled.
Transition
May differ slightly from the actual interface.
Key Point:
Set the playback speed of the Text Animation. Controls the motion while maintaining text readability.
What this changes:
Even with the same animation, different timing settings produce very different impressions.
Adjustment tips:
If text becomes hard to read during the transition, start by reducing Duration and Delay.
Settings
Duration (ms): Animation playback time. Shorter values feel snappy; longer values add dramatic effect.Delay (ms): Wait time before the animation starts after Hover. Unnecessary delay degrades the interactive feel.Easing: Speed curve pattern.ease-outtypes produce a natural deceleration.Custom Value: Enter a custom Easing value to match the motion to your brand tone.Reset: Resets the Transition settings to their defaults.
The Text Animation Transition operates independently from the Style Settings Transition and the Icon Animation Transition. Each has its own Duration / Delay, allowing you to create different timing effects for text and icons.