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.
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.
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>