Why can't I use more than 3 viewport interactions?

Ask the community
1

Creating my site, I’m looking to have a background that changes color based on where you are in the page. To do this, I am using 6 containers, and using the code to fade as described here https://youtube.com/watch?v=zZWw1z-eHeU&feature=share8 . But it seems only the first 3 events are triggered. Why is this, and how can I get around it?

2

Hey!

If you’re using code, I’d recommend checking out the Velo forum. They should be able to point you in the right direction.

3

Can you show the code ?

4

$w . onReady ( function () {

});

export function servicelist_viewportEnter ( event ) {
$w ( ‘#dpurple’ ). show ( ‘fade’ );
}
export function servicelist_viewportLeave ( event ) {
$w ( ‘#dpurple’ ). hide ( ‘fade’ );
}
export function gallery1_viewportEnter ( event ) {
$w ( ‘#purple’ ). show ( ‘fade’ );
}
export function gallery1_viewportLeave ( event ) {
$w ( ‘#purple’ ). hide ( ‘fade’ );
}
export function quotebox_viewportEnter ( event ) {
$w ( ‘#wine’ ). show ( ‘fade’ );
}
export function quotebox_viewportLeave ( event ) {
$w ( ‘#wine’ ). hide ( ‘fade’ );
}
export function otrig_viewportEnter ( event ) {
$w ( ‘#orange’ ). show ( ‘fade’ );
}
export function otrig_viewportLeave ( event ) {
$w ( ‘#orange’ ). hide ( ‘fade’ );
}

dpurple, purple, wine, and orange are containers the size of the page with a default state of being hidden. They have different colors and will should fade in and out on entry and exit of the viewport by different triggering elements. servicelist, gallery1, quotebox, and otrig

5

code supplied above, thank you.

6

Try to move them inside the onReady like this. I made one so just make all like that

$w.onReady(function () {
$w('#servicelist').onViewportEnter( () => {
$w('#dpurple').show('fade');
})

$w('#servicelist').onViewportLeave( () => {
$w('#dpurple').hide('fade');
})
});