Grid with changing logos

Hi

I am trying to recreate the below but not a clue where to start…

I understand I need a grid etc but I am not sure how to make the logos fade in and out randomly

Heres what I am trying to recreate under “work”


Here is my public share link: LINK
(how to access public share link)

2 Likes

Ooo this is a fun one!

I would create the grid, and then place sliders inside of each. Set the sliders to automatically “slide” between logos. You’ll want to tweak the timing of each until it feels random.

Bummer no one followed up on this. Would love to grab this as well. :slight_smile: Pretty cool.

:eyes:

https://wishlist.webflow.com/ideas/WEBFLOW-I-5601

I went ahead and recreated this through your suggestion. But the design is barely feasible as there seems to be no way (not even through code) to offset the sliders from each other. So i did not succeed in making this design work with webflow due to limitations sadly.

1 Like

hi @damse this is can be done with custom JS. You need to:

  1. set initial images from array (of images)
  2. take random number of cell (from array of cells)
  3. take image from array of images that is not in array of displayed images
  4. replace image and store number of cell with currently changed image in variable
  5. take random cell that is not equal stored value
  6. change image in new cell

This function will be triggered by setInterval
DONE

I did a script to handle this. Feel free to grab it here, and see it live on my site: launchr.net

<script>
// JavaScript for swapping logos randomly in a grid.

var logos = [
// Add the path to your logos below. Minimum 11 logos are required to fulfill a grid of 2x5

    "https://uploads-ssl.webflow.com/61f90898c4cec7ee3121f823/646e027aafc3b665b8d8f4d7_Azalvo%20Color%20WP.webp",
    "https://uploads-ssl.webflow.com/61f90898c4cec7ee3121f823/646e01af2b348bb7f67e0719_Liz%20and%20Betty%20Color%20BW.webp",
    "https://uploads-ssl.webflow.com/61f90898c4cec7ee3121f823/646e014e442044cdf65b896a_Uma%20Color%20BW.webp",
    "https://uploads-ssl.webflow.com/61f90898c4cec7ee3121f823/646e0098f657a4100bf6fffb_Primal%20Color%20BW.webp",
    "https://uploads-ssl.webflow.com/61f90898c4cec7ee3121f823/646e004b37eee4ad80dfeded_Duke%20Language%20School%20BW.webp",
    "https://uploads-ssl.webflow.com/61f90898c4cec7ee3121f823/63159e13cf6f3be25a4d29a6_GLX%20BW.webp", 
    "https://uploads-ssl.webflow.com/61f90898c4cec7ee3121f823/63159e2864bb4ecfe0ac43e0_Sleek%20BW.webp", 
    "https://uploads-ssl.webflow.com/61f90898c4cec7ee3121f823/63159e4ab9c9fa827b737847_AIP%20BW.webp", 
    "https://uploads-ssl.webflow.com/61f90898c4cec7ee3121f823/63159eab77fdaebe18a72cbd_Fat%20Mango%20BW.webp", 
    "https://uploads-ssl.webflow.com/61f90898c4cec7ee3121f823/63159eb71b1c7653e6ae63b2_Happyer%20BW.webp", 
    "https://uploads-ssl.webflow.com/61f90898c4cec7ee3121f823/63159e6e617b3d52dc93cdbf_Kandio%20BW.webp", 
    "https://uploads-ssl.webflow.com/61f90898c4cec7ee3121f823/63159e9dcaf1238136a779c8_eBogholderen%20BW.webp", 
    "https://uploads-ssl.webflow.com/61f90898c4cec7ee3121f823/63159e7b65cd536e2e6ceb45_MixCare%20Health%20BW.webp", 
    "https://uploads-ssl.webflow.com/61f90898c4cec7ee3121f823/63159e8765cd53530b6ceb69_Schedult%20BW.webp", 
    "https://uploads-ssl.webflow.com/61f90898c4cec7ee3121f823/63159e923c5896f9638fc105_Techsauce%20BW.webp",
    "https://uploads-ssl.webflow.com/61f90898c4cec7ee3121f823/63159e5d258fbb1128ff70f9_Jumpstart%20BW.webp"
];

var transitionDuration = 0.35; // Transition duration in seconds

window.onload = function() {
    // Populate container with first 10 logos
    for (var i = 0; i < 10; i++) {
        var logoElement = document.getElementById("logo" + i);
        logoElement.src = logos[i];
        logoElement.style.opacity = 1;
        logoElement.style.transition = `opacity ${transitionDuration}s ease-in-out`; // set transition duration
    }

    // Start the swapping
    swapLogos();
}

function swapLogos() {
    var index = Math.floor(Math.random() * 10); // Choose a random logo on the page
    var logoElement = document.getElementById("logo" + index);
    logoElement.style.opacity = 0;

    setTimeout(function(){
        // Make a list of currently visible logos
        var visibleLogos = [];
        for (var i = 0; i < 10; i++) {
            visibleLogos.push(document.getElementById("logo" + i).src); // we keep the whole path this time
        }

        // Make a list of available logos (i.e., those not currently visible and not the same as the current logo)
        var currentLogo = logoElement.src;
        var availableLogos = logos.filter(logo => !visibleLogos.includes(logo) && currentLogo != logo);

        // If there are no available logos, do nothing (this should never happen if you have more than 10 unique logos)
        if (availableLogos.length == 0) return;

        // Choose a random logo from the available logos
        var randomLogo = availableLogos[Math.floor(Math.random() * availableLogos.length)];

        // Set the new source and remove the fade-out class to fade in the new logo
        logoElement.src = randomLogo;
        logoElement.style.opacity = 1;
    }, transitionDuration * 1000); // match the duration of the CSS transition

    // Set the next swap
    setTimeout(swapLogos, 3000); // swap every 3 seconds
}
</script>

here is slightly more modern JS syntax


const imgElements = [...document.querySelectorAll("ul li img")];

let visibleLogos = [];

function setUniqueNumbersArray() {
  let randomNumber = Math.floor(Math.random() * logos.length);
  visibleLogos.includes(randomNumber)
    ? setUniqueNumbersArray()
    : visibleLogos.push(randomNumber);
}

for (const [i, imgElm] of imgElements.entries()) {
  setUniqueNumbersArray();
  imgElm.src = logos[visibleLogos[i]];
}

function changeRandomLogo() {
  const randomLogoNr = Math.floor(Math.random() * logos.length);
  const randomImgNr = Math.floor(Math.random() * imgElements.length);
  const randomImgElm = imgElements[randomImgNr];

    if (visibleLogos.includes(randomLogoNr)) {
        changeRandomLogo();
    }else{
        visibleLogos[randomImgNr] = randomLogoNr;
        randomImgElm.src = logos[randomLogoNr];
        randomImgElm.animate([{ opacity: 0 }, { opacity: 1 }], {
            duration: 2000,
            fill: "forwards",
        });
    }
}

setInterval(changeRandomLogo, 2000);

Feel free to grab it here and improve it to your needs. The result can be seen live on codepen

Looks great!
Can this be done with a CMS collection?

I have never tried but feel free to give a chance to customise code to grab logos url’s from CMS.

Yes here is example how it can be done. There is still room to improve it but it can be considered as basic starting point.

example

1 Like