Grid with changing logos

Design help Animations & Interactions
6

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>
1 Like