Problem with show/hide + annimation

Ask the community
,
1

I’ve made a little interaction that looks like a tool tip - a text being revealed when hovering over a button.
( https://www.chagim.org.il/tubeshvat - five white buttons in the second strip)
Because I need the reveal animation to perform from right to left, I animated the text without code. It only shows and hides with an “on mouse enter”.
The problem is that it blinks for a moment, and only then the animation is performed.
It does not happen all the time, but 98% from the time…
This blinking looks very bad.
I wonder what can be done about it, and why it happens.
(I would like to add animation to the menu as well, but I haven’t done it yet because of this problem)

Thanks
Tamara

2

Hi Tamara,
I’ve accessed your editor and noticed that you’ve added animation to the buttons using both the editor and the mouseIn and mouseOut events. I recommend choosing only one of the methods to display the relevant animation. This should resolve the issue.

Best,
Tal.

3

Hi Tal,
The mouseIn / mouseOut does not animate the text, it just hides and shows it.
As I’ve explained, If I want the text to reveal from right to left I cannot do it with code, as there are no parameters in the “reveal” animation.
Apparently, there is no solution right now.
Tamara

4

Hi,
I re-checked it and it’s a bug. However, you can show the element with animation as explained in the documentation here instead of using the editor. Note that there is a “Reveal” parameter (without an option to set the Reveal direction ).

$w("#myElement").show("Reveal");

Tal.

5

Thanks, I know this option, but I can’t use it.
I need the direction to be right to left.

6

I’ve forwarded it to the relevant team. In the mean time you can try using a different animation instead.

7

Hi, I am having the same blinking issue with float in animation. I hide first and then show my animated text in my text’s viewport enter method. Please help!

8

Hi,
Can you please send us the site URL and the name of the page so that we can have a look?
Moreover, have you set animation using code and the editor or just using code?

Thanks,
Tal.

9

Hi Tal,
Thanks for responding. Here is the site URL: https://karunarohra.wixsite.com/threeentertainment
Please notice the blinking effect that looks really bad with the animation. I have achieved the animation just using code so as to get a repeated animation effect on scrolling up and down. Please help!

Thanks,
Karuna

10

Hi Karunarohra,
I checked your code.
What you doing is hiding an element and then showing it with animation.
The solution to your problem is to set the element to hidden on load on the properties panel and cancel this code on your element:

 if (!$w('#yourElement').hidden) {
    $w('#yourElement').hide();
 }

Good luck!
Roi.

11

Hi Tamara,

A question, which Plugin you are using for the accessibility option on your website?

Thanks,

Lior