Load animated gif on viewport

Ask the community
,
1

Building a page where we want to control when an animated gif gets played when they enter viewPort area.

Right now if we add animated gifs they just play on load so user won’t see animation.

Alternatively we could hookup vid format and play on viewPort

but wondered if there was some sample code, folks who pulled this off before

thanks!

2

Hi,

Add the gif as an image, set it to ‘hidden on load’ in the properties panel.
Next, add an anchor and position it where you want to trigger the animation.

Finally, add a onViewportEnter event from the anchor properties panel and add the following code:

export function anchor1_viewportEnter(event, $w) {
	$w('#image1').show();
	setTimeout(function () {
		$w('#image1').hide();
	}, 3000); //hides the animation after 3 seconds
}
3

thanks Ido

I think one of the main issues is that the image loads on page load, and the animation will play out before getting to the viewport

therefore the image comes in but at the last frame not loading into memory and starting animation at start

4

Hi Joey,

To ensure the gif plays out at the right time you should manually set the image’s src parameter.

export function anchor1_viewportEnter(event, $w) {
	$w('#image1').src = 'https://static.wixstatic.com/media/b167f8_92b33962fbd04e4b8690751e4e83d945~mv2.gif';
	$w('#image1').show();
}
5

thanks would you recommend setting the page up with a blank gif for image 1 then on viewport, loading src of full animation?

appreciate your help

Joey

6

I want to have the gif play once when its hovered over and then stay on the last frame, then maybe go in reverse when hover is released. Do you have any advice or hints for how I can achieve this or if it will be possible on this website? Thanks!