Trying to achieve the hover box effect with Velo

Ask the community
,
1

Hi, this is my webpage:
https://kevin806604.wixsite.com/website/%E9%AB%98%E4%B8%AD%E8%A1%A5%E4%B9%A0

As you can see on the left side when you hover over you can see hidden text, I achieved this effect by using a hover box on Wix. However, the downside of the hover box is that for the hovered effect you can’t align the text using wix’s snap-on functions. I am trying to use Velo to create a similar effect but the show and hide functions cannot happen simultaneously and smoothly. I have used the following code and as you can see when you hover the yellow box there is a lag.

export function box9_mouseIn(event) {
    // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
    // Add your code for this event here: 
    $w("#text29").hide();
    $w("#image7").hide();
    $w("#text31").show();
    $w("#text32").show();

}

export function box9_mouseOut(event) {
    // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
    // Add your code for this event here: 
    $w("#text31").hide();
    $w("#text32").hide();
    $w("#text29").show();
    $w("#image7").show();
}
2

Nothing happens when hovering over the yellow box.

Edit: What about this one? …

$w.onReady(()=>{
	$w('#box9).onMouseIn(()=>{
		$w("#text31, #text32").hide('fade');
		$w("#text29, #image7").show('fade);
	});
	$w('#box9).onMouseOut(()=>{
		$w("#text31, #text32").show('fade');
		$w("#text29, #image7").hide('fade);
	});
});
3

Hi Johnathan,

I suggest using wix-animation for that instead of the built-in animation, you’ll get better results as well as smooth animation.

A) Import the animations module

import animations from 'wix-animations';

B) Define the animations

const timeline = animations.timeline();
timeline.add([$w('#text1'), $w('#text2')], { opacity: 0, duration: 350 });
timeline.add([$w('#text3'), $w('#text4')], { opacity: 1, duration: 350 });

C) Define the event handlers

$w('#box').onMouseIn(() => timeline.play());
$w('#box').onMouseOut(() => timeline.reverse());

This effect is buttery smooth, notice the difference between it and the regular effects.

Hope this helps~!
Ahmad

4

Hi I put this exact code into my page and nothing is happening:


import animations from 'wix-animations';
const timeline = animations.timeline();
timeline.add([$w('#text32'), $w('#text31')], { opacity: 0, duration: 350 });
timeline.add([$w('#text29'), $w('#image7')], { opacity: 1, duration: 350 });
$w('#box9').onMouseIn(() => timeline.play());
$w('#box9').onMouseOut(() => timeline.reverse());
5

@ilikebeers1998 I did not provide a complete code, so it’s not copy-paste ready, I was just explaining each step.

Except the first line, all the rest should be inside the page’s onReady( ) function.

6

@ahmadnasriya Hi, thank you so much after some trial and error I have managed to achieve somewhat a similar effect through this code:

import animations from 'wix-animations';
$w.onReady(function () {
    const timeline = animations.timeline();
    timeline.add([$w('#text29'), $w('#image7')], { opacity: 0, duration: 350 });
    timeline.add([$w('#text32'), $w('#text31')], { opacity: 1, duration: 350 });
    const timeline2 = animations.timeline();
    timeline2.add([$w('#text29'), $w('#image7')], { opacity: 1, duration: 350 });
    timeline2.add([$w('#text32'), $w('#text31')], { opacity: 0, duration: 350 });
    $w('#box9').onMouseOut(() => timeline2.replay());
    $w('#box9').onMouseIn(() => timeline.replay());
});

However, the only issue is that when you place your mouse outside the box the animation is not really smooth because the hidden text shows up right away. Is there any way to fix this?

7

@ilikebeers1998 you have multiple duplications in your code, only include the code once.

It feels instant because the animation duration is 350ms, 1000ms = 1 sec, you can change the duration to your liking, basically, the more duration the slower the animation.

8

@ilikebeers1998 you only need 1 timeline, no need for more.
delete the second timeline.

Also, in the box mouse in/out event handlers, use play() with mouseIn and reverse() with mouse out. Please note my exact typing.

9

@ahmadnasriya I need two timelines because one hides 2 elements and show the other if I reverse play it, it will do the same thing and not do the same thing as the hover box

10

@ilikebeers1998 the tmeline shows 2 elements and hide other 2 at the same time when it’s played, reverse only reverse the process, meaning it’ll hide the 2 it started showing and show the other 2 it hid

11

@ahmadnasriya It worked! Thank you so much!

12

@ilikebeers1998 told you it will! Anytime :blush::grin:

13

@ahmadnasriya Sorry to bother you again, I dont know why it is not working again… this is my code:

import animations from "wix-animations";
$w.onReady(function () {
    const timeline = animations.timeline();
    timeline.add([$w("#text29"), $w("#image7")], { opacity: 0, duration: 350 });
    timeline.add([$w("#text32"), $w("#text31")], { opacity: 1, duration: 350 });
    $w("#box9").onMouseIn(() => timeline.play());
    $w("#box9").onMouseOut(() => timeline.reverse());
})

You can test it out on my website here:
https://kevin806604.wixsite.com/website/高中补习

14

@ahmadnasriya P.S. I set the two invisible text box to hidden at first (I dont know if there is any other way of doing this)

15

@ilikebeers1998 Both boxes work for me, the brown and the yellow ones.

16

@ahmadnasriya Try it multiple times, only two elements disappear after multiple tries

17

This does not work

18

@ahmadnasriya Hello are you there?

19

@ilikebeers1998 Sorry for the late reply, I was a bit busy.

2 elements disappear, and the other 2 elements don’t show up?