Reveal images on scroll

Ask the community
,
1

Hi there lovely people of the Velo forum!

I am currently working on a project in which the idea was to have a list of brand icons displayed in rows upon scrolling down to that part of the page!

I was looking to achieve something similar to what has been done on this page - https://better.agency/about/

The visual effect that is used is almost a staggered show of each of the images (brand icons) that reveals each icon in the top row and works through displaying each of the icons until they are all on the screen!

I have been researching how best to do this and I am not having much luck at this stage, any input or assistance from anybody would honestly be greatly appreciated!!!

2

In the link you poste, there’s a repeater-like element that starts populating once its top get into viewport.

So what you should do is:

  1. add a repeater to page.

  2. In each repeater item put an image placeholder and make the image hidden on upload (remove any other unnecessary element).

  3. Create a database collection with the images

  4. Add a dataset to the page

  5. Connect it to the repeater.

  6. Connect the image in the repeater to the image field in the dataset.

Set the code:

let areImagesHidden = true;
const intervalBetweenImagesInMs = 300;//300ms
$w.onReady(() => {
	$w('#dataset1').onReady(() => {
		$w('#repeater1').onViewportEnter(event => {
		if(areImagesHidden){
		$w('#repeater1').forEachElement(($i,_,inx) => {
		setTimeout(() => $i('#image1').show('fade'), intervalBetweenImagesInMs * inx);
		})
		areImagesHidden = false;
		}
		})
	})
})
3

Oh my gosh! Thank you SO SO much for your absolutely immaculate analysis and explanation about how to tackle this! I will jump into it and test it out right away, J.D you’re a star and I really am happy to see your message! Thank you!!! :smiley: