document.addEventListener('DOMContentLoaded', function() {
// Target the UL elements with their unique classes
const topRow = document.querySelector('.logos-top-row');
const bottomRow = document.querySelector('.logos-bottm-row');
// Function to set up scrolling for a specific row with custom duration
function setupScroll(list, duration) {
// Make sure the list has the right CSS
list.style.display = 'flex';
list.style.width = 'fit-content';
// Get the first half of items (your original logos)
const items = Array.from(list.children).slice(0, list.children.length / 2);
// Calculate the width of the first half (original set of logos)
const firstHalfWidth = items.reduce((width, item) => {
return width + item.offsetWidth;
}, 0);
// Set the scroll function
function scroll() {
// Reset position instantly
list.style.transition = 'none';
list.style.transform = 'translateX(0)';
// Force reflow
void list.offsetWidth;
// Start smooth scrolling animation with custom duration
list.style.transition = `transform ${duration}s cubic-bezier(0.4, 0.0, 0.2, 1)`;
list.style.transform = `translateX(-${firstHalfWidth}px)`;
}
// Initial scroll
scroll();
// Set up infinite scrolling with specific event
list.addEventListener('transitionend', function(event) {
// Only trigger scroll reset if it's the transform transition that ended
if (event.propertyName === 'transform') {
scroll();
}
});
}
// Reduce speed for mobile
const speedMultiplier = window.innerWidth Magic<
