I'm trying to achieve an animation wherein I fade in a hidden element 2 seconds after a page is completely loaded. I set the element to hidden on load using the properties tool and tried this code to display it after 2 seconds.
$w.onReady(function () {
let showOptions = {
'delay': 2000,
'duration': 1000
};
$w('#text1').show("fade",showOptions);
}
Although the problem here is that when the page is loading initially the element is visible for a fraction of second and then it goes hidden when page is fully loaded. Then after 2 seconds the element is displayed with a fade in effect. How do I keep the element hidden completely till the page is completely loaded ?
I THINK this is a bug within Wix. I tried doing the same thing but added a button this time and shifted the animation code inside the onClick function of the button. Now on running the code live, I found no unexpected display of the text while the page is loading. And the preview mode is also working fine on button click which earlier was not also hiding the element.
The elements that you set as hidden on load still have to be loaded when the page is loaded and only then will they be hidden, however they should not be showing on your page,
Maybe for what you have on your page, there is quite a lot on the page that it is taking a while to load all of the page and therefore you are seeing the hidden element whilst it is all loading and before Wix can tell it to be hidden.
As Yisrael has mentioned above, if it works in preview and not in live or not in preview and in live, then it might be more of a bug within Wix, however it is in both then it is more likely to be something on your page I am thinking.
Also, how long does your page actually take to load in preview and in live, have you tried just simply making the delay longer to say 5000ms just to see if it makes any difference or if it still does it with a longer waiting time.
Have a try of using collapsed on load and the expand function instead of hidden on load and show and see if it still does the same thing.
When it is collapsed it will not take up any room on your page and should in theory, not be shown on your page. Whereas with hidden it is hidden from the users view, however it is still on the page itself.
https://www.wix.com/corvid/reference/$w.HiddenMixin.html#hidden
hidden
Indicates if the element is visible or hidden.
Description
If hidden is true, the element is not displayed on the page under any circumstances. A hidden element, unlike a collapsed element, continues to take up the same space on the page as it did when it was visible.
https://www.wix.com/corvid/reference/$w.CollapsedMixin.html#collapsed
collapsed
Indicates if the element is collapsed or expanded.
Description
If collapsed is true, the element is not displayed on the page under any circumstances. A collapsed element, unlike a hidden element, does not take up any space on the page. When collapsed, elements positioned within 70 pixels below the collapsed element and each other move up to take the collapsed element's place where possible. The elements that move up maintain their positions relative to one another.
Does this happen in Preview, Live, or both?
Select the option "Hidden on load" on Properties Panel.