onViewportEnter does not work as expected

Ask the community
,
1

The #solid should show and hide on view port same for #light.

Both console . log are triggered but only the onViewportLeave show and hide are executed.
$w . onReady (() => {
$w ( ‘#transitionPoint’ ). onViewportLeave (() => {
$w ( ‘#solid’ ). show ()
$w ( ‘#light’ ). hide ()
console . log ( “ok” );
})

$w ( '#transitionPoint' ). onViewportEnter (() => { 
    $w ( '#solid' ). hide () 
    $w ( '#light' ). show () 
    console . log ( "nok" ); 
})

});

I’ve followed this video which is great https://www.youtube.com/watch?v=9_jtI06mqwk but it does work only in one way in my case.

And it should not …

2

I have completed the deficiencies in the code. This should work. Good luck.

$w . onReady ( function () => {
$w ( ‘#transitionPoint’ ). onViewportLeave (() => {
$w ( ‘#solid’ ). show ();
$w ( ‘#light’ ). hide ();
console . log ( “ok” );
});

$w ( '#transitionPoint' ). onViewportEnter (() => { 
    $w ( '#solid' ). hide (); 
    $w ( '#light' ). show (); 
    console . log ( "nok" ); 
})

});

3

Your code could never work, you are using a regular function with an arrow function.
Anyway even if I fix this using regular function, or an arrow function your code does not work more than mine unfortunately :confused:

4

I’ve fixed it. My element was not part on the header idk why. I guess it was part of the element that it superposed