UltimateUI guide
How to add animations on Hover
In this guide, you will learn how to add hover transition effect
Our elements can have animations on hover. We can easily add them in the Design tab.
To do this, go to the Design tab and then, in the Hover category, click Effect. At this point, we can choose which effect will appear when hovering over the element.
We can also add custom hover effects in the directory UltimateUI/contents/effects.
Example hover effect that scales the element:
id: scale_animation
name: Scale Animation
type: scale
amount-percent: 5
scale-x: 5%
scale-y: 5%
move-x: 0
move-y: 0
opacity-delta: 0
rotation-deg: 0
duration-ms: 250
interpolation: ease-in-outAdditionally, we can make an image change when it is hovered over.
- type: image
id: example
name: icon3
layer: 1
image: image_name_here
position:
x: 0
y: 0
size:
width: 500
height: 500
hover:
effect: scale_animation
image: new_image_name