Button hover effect

Saola Animate Support Questions
1

image
image748×363 52.9 KB

I saw a tutorial on Youtube where a button/object expands when hovered. The on click was explained but for the button hover effect itself, it wasn’t.

How can I add effects on the button itself when the button is hovered on and off?

2

Hi Leon,

As can be seen, when you hover the mouse over one element (for example, Carrot), it displays with a larger size.
For your information, that’s because the element is triggered with the Mouse Enter event and two actions:

  • Show Element: Carrot_1 (the symbol with larger image size)
  • Hide Element: Carrot (itself)

image
image981×305 15.4 KB

After the symbol Carrot_1 appears then you leave it, the Mouse Leave event is used along with two actions:

  • Hide Element: Carrot_1 (itself)
  • Show Element: Carrot (original image size)

image
image966×272 13.7 KB

Hope that it clarifies.
Have a great time.
Thuy

3

Thank you so much for the fast response! :heart:

Ohh, so it means I have to duplicate the same element and put different attributes for the hover effect.
Does it also work if both elements (original size and enlarged size) are inside a symbol?

4

Hi,

That depends on users’ needs, Leon.
In many cases, it is not necessary to duplicate the element. Instead, you can create interactive timelines, symbols, etc, and make everything works as you want.
But the Mouse Enter and Mouse Leaves events should be used if you want to trigger an element when hovering the mouse over it.

Thuy

5

Got this, thank you so much!

1 Like