How can I create a bouncing down arrow?

I would like to animate an element (down arrow image) in my hero that will continue to bounce to indicate the visitor should scroll down.

Any ideas how to achive this? There doesnt seem to be a bounce effect like I want, and I’m not sure how to make it continue to animate.

Hello Jamie,

you can upload the animation you want using the upload option in choosing images then selecting the item you want to upload to your wix page.

Massa

Thanks Massa, I’m currently using an animated GIF, but was hoping to see if it is possible to use javascript animation on an image to acheive this without using a animated GIF?

Hello Jamie

you can try using the onViewPortEnter() and onViewPortLeave() , then hide and show the element using the animation and duration you want, here’s how it would look like :

export function vectorImage2_viewportEnter(event) {
 //Add your code for this event here: 
    setTimeout(function(){ $w('#vectorImage2').hide('bounce');}, 30);
}

export function vectorImage2_viewportLeave(event) {
 //Add your code for this event here: 
    setTimeout(function(){ $w('#vectorImage2').show('bounce');}, 30);
}

Massa

Thanks again Massa!!

Hi Massa, this only works for me in preview mode. It works only for a second when published. I also created a custom menu with a lightbox but when it’s published, I get a javasript:void() error when I click on the menu button linked to it. Is there a fix for this please?

Thanks, John

Good recommendation, will try to follow it also, thanks