How can I add a duration to hide()?

Ask the community
,
1

Hi! I’m trying to hide an element for a few seconds until the animation begins to play. I wrote this:

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

But I don’t know how to hide it first before the glide animation plays.

Thanks as always :slight_smile:

2

With your above code you are basically telling the hoverbox to hide and show at the same time when your hoverbox comes into viewing area.

If you have a specific element in the hoverbox, then why not try using that element and then showing the hoverbox.

What animation is playing, if it is a video then you can manipulate it with code.
https://www.wix.com/corvid/reference/$w.PlayableMixin.html
https://www.wix.com/corvid/reference/$w.Video.html
https://www.wix.com/corvid/reference/$w.VideoPlayer.html

The same with audio and vector images.
https://www.wix.com/corvid/reference/$w.AudioPlayer.html
https://www.wix.com/corvid/reference/$w.VectorImage.html

3

Hi! The problem is that you can’t animate a text box or an image since it’s in a hoverbox. What about putting a duration to hide()? The glide animation has a 7 sec delay, so that’s the time the hide() function should last. I don’t know if that’s possible to do without adding an animation, though. Any ideas to do it?

4

Remember that with hoverboxes it is only the regular tab that is automatically animated, you can add whatever animation you like to the hover tab.

The other option, depending on what you are doing, is to make it up yourself with something simple like having the animation itself in a box appear with just the show and effect options call with the onViewport Enter.

If you still need the effect of the hoverbox, then simply have another box displayed on your page as the regular one would be and use either onViewport or OnMouse so that when it runs the regular box is hidden and the animation box is shown with the glide animation.

Plus, remember that on mobile versions that the hoverbox won’t work anyway and it will only show the one page only.

5

I enjoy timing puzzles, so I played with this one.
While the code is rather trivial, I don’t think that most users are fully aware of the JS timing functions , and if they are, they may not be patient enough to tinker with it.
I think the feature your requested should be built into the Wix/Corvid API.

The proper function to use for your desired effect is:

setTimeout (function, milliseconds);

Executes a function, after waiting a specified number of milliseconds.
I let you figure that one out, it’s rather easy.

To demonstrate and visualize the countdown I used this function:

setInterval (function, milliseconds);

Same as setTimeout(), but repeats the execution of the function continuously every x milliseconds, until you turn the timer off with code.

Sample page (it will be up for a while, but may be removed at my discretion):
https://www.ualmatrix.com/hoverbox

Scroll up and down - every time the Hoverbox enters the viewport, the countdown starts over.
Because the Hoverbox is hidden on load, it cannot trigger the onviewport event.
So, you overlay a blank and transparent image over the hoverbox and you let that trigger the onviewport event. Once the Hoverbox animation completes, you hide the blank image so that mouse-over effect on the Hoverbox can trigger. When the Hoverbox scrolls out of sight, you reset everything.

BTW, as @givemeawhiskey mentioned, images inside the Hoverbox can be animated with effects.
In my sample, mouse-over the Hoverbox for a few seconds, and you’ll see an image slide in.

Here is the code:

// Delay for Hoverbox with countdown before Hoverbox animation starts

var countDownSeconds = 7;           // set desired countdown seconds (delay before Hoverbox shows up and animates with effect)
var myVar =0;                       // countdown interval timer

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

// blank tranparent image overlay over the Hoverbox to trigger the _viewportenter function
// since Hoverbox is hidden on page load, it cannot trigger the _viewportenter function by itself
export function imageBlankTransparent_viewportEnter(event) {    
    myVar = setInterval(timer, 1000);       // start countdown timer: run timer() every 1000 milliseconds
}

function timer() {
    countDownSeconds --;
    $w("#textCounter").text = "" + countDownSeconds;
 if ( countDownSeconds === 0) {
 // finished countdown
 // desired actions: show Hoverbox with animation (zero delay)
        clearInterval(myVar);                   // end countdown timer
        countDownSeconds = 7;                   // reset counter for next countdown
        animateHoverbox()                       // start Hoverbox effect
        $w('#imageBlankTransparent').hide();    // must hide to allow mouse-over of Hoverbox
    }                               
}

export function animateHoverbox() {         // delay must be set to zero for instant animation after countdown delay
 //$w("#hoverBox1").hide()
    $w('#hoverBox1').show('glide',{ "duration": 4000, "delay": 0, "angle": 180, "distance": 150 }); 
}

export function hoverBox1_viewportLeave(event) {
 // unhide the transparent blank image that triggers the _viewportEnter(event)
 // hide thenHoverbox so it's ready for a new countdown and effect when _viewportEnter(event) fires
    $w('#imageBlankTransparent').show();
    $w('#hoverBox1').hide();
}
6

Sorry, but I still haven’t figured it out. I wrote this but it still doesn’t work:

$w.onReady( function() {
} );
export function columnStrip2_viewportEnter(event) {
    setTimeout(function, 1000);
}

(I know the code has changed, I’m trying another thing).
How can I solve this?

7

Hey @b4443569 ,
Try the following:

  1. Add a column strip to your page.

  2. Set the background color of the column strip as transparent so site visitors won’t see it.

  3. Place the hover box inside the column strip.

  4. Hide the hover box on load in the Properties panel.

  5. Create an onViewportEnter event handler for the column strip in the Properties panel.

  6. Add the following code to your page:

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

export function columnStrip1_viewportEnter(event) {
  setTimeout(() => $w('#hoverBox1').show('glide', glideOptions), 7000);
}

When the transparent column strip enters the viewport, the setTimeout() function will wait 7 seconds and then call the show() function on the hover box with the glide effect and the defined options.
Note that I removed the delay option from the glideOptions since the delay is handled by setTimeout().
HTH,
Tova

8

Hi Tova! Thank you for your reply. I’m curenty interested in applying the same effect to a strip, but I’m facing the same problem as before. I wrote this:

$w.onReady( function() {
} );
export function columnStrip2_viewportEnter(event) {
    setTimeout(function, 1000);
}

How can I solve it?

9

Hey @b4443569 ,
The idea is the same. Here are a couple points to keep in mind:

  • setTimeout() takes a function as a parameter, but you need to specify the function somewhere, and not just use the word “function.” You can either specify the function directly in the parentheses (as I did), or you need to declare the function somewhere else and call the function name in the parentheses (as @brainstorrrm did with setInterval() and his timer() function). In this case, the function we want to call is show().

  • onViewportEnter() doesn’t work with hidden elements. To get around this issue, we add a transparent element on top of the element we want to hide, and apply the onViewportEnter() event handler to the transparent element.
    HTH,
    Tova