CODEWITHSUNDEEP
javascriptcssreactjs
ramuk
ramuk

Reputation: 47

Reveal images one by one

I'm displaying a list of images in react using map, and I want to reveal the images one by one after a delay. My images look like this and I want it to be revealed one by one.

Images are displayed using the below map.

{props.chain.map((value, index, elements) =>
        <div>   
            {<img src={elements[index].image_url} className="evol_img" />}
        </div>                          
)}

Ideas to do the same are much appreciated!

Upvotes: 1

Views: 175

Answers (1)

JW Geertsma
JW Geertsma

Reputation: 877

Maybe you could add a CSS animation to the images and combine it with a setTimeout on each of the items in your map.

Something like this might work for you:

const interval = 200;
let timeout = interval;
    
{props.chain.map((value, index, elements) =>
   <div>   
      {setTimeout(() => {
        return <img src={elements[index].image_url} className="evol_img" />
        timeout = timeout + interval;
       }, interval);
   </div>                          
)}

Upvotes: 1

Related Questions