Can't animate text.

Ask the community
,
1

I want to animate a text box but I have to do it via Corvid because the text is in a hoverbox. I tried to do this:

let glideOptions = {
 "duration":   2000,
 "delay":      7000,
 "angle":      180,
 "distance":   150
};

$w("#text2").show("glide", glideOptions);

But it doesn’t seem to work. I tried to animate the hoverbox (replacing #text2 with #hoverboard1) but it also didn’t work. Any ideas?

Thanks in advance.

2

Be sure to hide the text before you animate it.
.show() only works on hidden elements.

3

Also, are you trying to animate the text on the regular page of the hoverbox or the hover page itself?

Remember that the hoverbox is technically a Wix app and with the regular page that anything you add will be automatically animated so that it can switch over to the hover page etc. Whereas the hover page will be left for you to edit animations on anything as you so wish.

Therefore, if you are trying to animate text on the regular page it may not work as it may be overridden with the animation already setup for the hoverbox, whereas on the hover page you can add the glide in effect animation yourself through the Wix Editor settings.

4

I think I’m doing it wrong:

$w("#hoverBox1").hide();
let glideOptions = {
 "duration":   2000,
 "delay":      7000,
 "angle":      180,
 "distance":   150
};

$w("#hoverBox1").show("glide", glideOptions);

Also, in both cases a message pops up and says this: “The element selector function (usually $w) cannot be used before the page is ready”.
I’m kind of a noob in Corvid so could you please provide me the code?
Thanks for answering.

5

Sorry for not explaining it well, I was referring to the hoverbox itself, not the animation that triggers when you hover the mouse over the hoverbox. How can I do so? Also, thanks for answering.

6

@b4443569

You need to be pasting your code after your page’s onReady function at the top, see here for more info. https://www.wix.com/corvid/reference/$w.html#onReady

Then you need to have something on your page happen with an event handler for example, onClick, onMouse, onViewport etc for the hoverbox to be shown.

Also, for showing and hiding your hoverbox, have a look at these pages to gain an understanding of using show and hide and effect options etc.

https://support.wix.com/en/article/corvid-tutorial-hiding-an-element-on-certain-pages
https://www.wix.com/corvid/example/hide-and-show-elements
https://support.wix.com/en/article/corvid-tutorial-adding-custom-interactivity-with-events

Plus, try adding your effect option as this instead.

$w('#hoverBox1').show('glide',{ "duration": 2000, "delay": 700, "angle": 180, “distance”: 150 });

You can go more into the code and also write it for different options depending on whether viewing on desktop or mobile devices too, see here for more info.
Velo Tutorial: Displaying Elements in Mobile Only | Help Center | Wix.com

However, note that with a hoverbox, that it will only show the one box on mobile as you can’t use hover on a mobile.
https://support.wix.com/en/article/customizing-your-hover-box-on-your-mobile-site

Finally, it might be a good idea to read the Wix API reference for .show() and .hide() too.
HiddenMixin - Velo API Reference - Wix.com

Plus, you can also use .expand() and .collapse() too.
CollapsedMixin - Velo API Reference - Wix.com

7

@givemeawhisky The effect works! But I’m having a struggle with hiding it at the beggining before the glide effect in show() plays. Here’s the code:

$w.onReady( function() {
} );

export function hoverBox1_viewportEnter(event) {
    $w("#hoverBox1").hide()
    $w('#hoverBox1').show('glide',{ "duration": 2000, "delay": 7000, "angle": 180, "distance": 150 });
}

Also, it is possible to have two different effects playing at the same time? I would like to add a fade effect to the hoverbox along with the glide one.