Velo help - how to add a fade in animation to an element with scrolling?

I am a complete novice with using Velo (and should be said we use Wix Classic). I’m an architect by trade so this isn’t my usual remit I want to add a simple fade in animation for an element (scrollingBox) that appears once the user scrolls past a transition point (transitionStrip1) .

I have the following code - however when I add a ‘fade’ into the show() or hide() sections the element doesn’t show at all. Any help appreciated.

$w.onReady(function () {
$w(“#transitionStrip1”).onViewportLeave(() => {
$w(“#scrollingBox”).show(‘fade’, { duration: 2000, delay: 0 });
})
$w(“#transitionStrip1”).onViewportEnter(() => {
$w(“#scrollingBox”).hide(‘fade’, { duration: 2000, delay: 0 });
});
})

You did this:

  • When the object enters the screen - hide it
  • When the object leaves the screen - show it

You swapped the logic around lol

Thanks for responding.
That is essentially what I’m after - when ‘transitionStrip1’ leaves the screen I want ‘scrollingBox’ to show (with a smooth fade in effect) - and then when I scroll back up to reverse it.

I can make it work with the following code - however its clunky and doesn’t fade in or out nicely. So I added a fade into the show or hide but then ‘scrollingBox’ doesn’t show at all. Am I missing something?

$w.onReady(function () { 
	$w("#transitionStrip1").onViewportLeave(() => {
		$w("#scrollingBox").show();
	})
	$w("#transitionStrip1").onViewportEnter(() => {
		$w("#scrollingBox").hide();
});
})

Oh, my apologies, I didn’t realize those elements are exclusive, and you want to see one or the other

The code is correct syntactically, there are no problems with it that I can see
Let’s try to play with it:

  • Could you try the default options? show('fade')
  • Could you try different effects?

Also, a slight refactor:

  • delay defaults to 0 so you can remove it
  • Pretty sure you do not need to encapsulate the viewport triggers within $w.onReady’s trigger, so you can most probably remove the first and last lines
$w('#transitionStrip1').onViewportLeave(() =>
    $w('#sxeollingBox').show('fade'))
$w('#transitionStrip1').onViewportEnter(() =>
    $w('#sxeollingBox').hide('fade'))

Hi, unfortunately adding a simple ‘fade’ still hides the entire element. I’m not sure of any other effects to try?

I neatened it up a little like you suggested and that works correctly however the same problem persists when inputting ‘fade’.

$w.onReady(function () {
    $w("#transitionStrip1").onViewportLeave(() =>
        $w("#scrollingBox").show())
    $w("#transitionStrip1").onViewportEnter(() =>
        $w("#scrollingBox").hide());
})

That is interesting, perhaps it has to deal with the element’s type

A. Have you tested a different hide animation?
B. Could you try hiding a different element, such as a simple image, instead of the box? This may be because the box holds other elements, but I am not sure

Also, of course not, my tidying of the code served no purpose in fixing it, rather in its readability

To be honest, I’m not entirely sure what the correct behavior should look like, but how about modifying the code so it checks if the element is already hidden before calling .show(), and if it’s already visible before calling .hide()? Alternatively, you could use .then() to wait for one fade animation to finish before starting the other, and manage the animations with a flag to ensure one animation doesn’t run while the other is still active. :thinking:

I’ve found that the show/hide with fade is buggy and I’ve only once managed to get it working with a lot of messing around.

You may find just using the UI animation settings for the box, set to scrolling and customised to type In works for you rather than coding.

The effect is as the user scrolls up the animation will fade in, as the scroll back down, it will fade back out.