Logos

Name : Logos / mini / Logo with case study link

This is a mini component used within the main component to create a system of logos with similar properties.

Case study →

Name: Logos / Group Logos

Options:

Heading – You can edit the heading and control its visibility.

Logos - You can add or replace up to 14 logos (you can also hide them).
Each logo option allows you to add a link and a tag, which can be shown or hidden via properties.

Trusted by the world’s most innovative companies

Case study →

Blog post →

Name: Logos / Heading / Grid

Options: You can add or replace up to 8 logos (you can also hide them).

Options:

Heading – You can edit the heading and control its visibility.

Background - Can be updated

Logos - You can add or replace up to 8 logos (you can also hide them).

Trusted by the world’s leading brands

Name: Logos / Single Row

Options:

Logos - You can add or replace up to 5 logos (you can also hide them).

Background - Can be updated

Name: Logos / Marquee / 16 logos

Options:

Logos - You can add or replace up to 16 logos (you can also hide them).

‍

In Head Tag

<style>
/* CSS Keyframe Animation */
@keyframes translateX { 
	to {
    transform: translateX(-100%);
  }
}

[data-css-marquee-list] {
  animation: translateX 40s linear;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}
</style>

In Before Body Tag

<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>

<!-- GSAP Animation -->
<script>
  window.addEventListener('load', () => {
    const timeline = gsap.timeline({
      defaults: { delay:1, duration: 0.8, ease: "power1.inOut" }
    });
    // Animate all hero layers with stagger
    timeline.fromTo(".food-bev__second-img",
      { y: -20, opacity: 0 },
      { y: 0, opacity: 1, stagger: 2 },
      "+=0.1"
    );
  });
</script>

<!-- Marquee -->
<script>
function initCSSMarquee() {
  const pixelsPerSecond = 50; // Set desired scroll speed (pixels per second)
  const marquees = document.querySelectorAll('[data-css-marquee]');
  
  marquees.forEach(marquee => {
    // Remove any previously duplicated marquee lists (cleanup)
    marquee.querySelectorAll('.marquee-duplicate').forEach(el => el.remove());

    marquee.querySelectorAll('[data-css-marquee-list]').forEach(list => {
      // Duplicate the list for seamless looping
      const duplicate = list.cloneNode(true);
      duplicate.classList.add('marquee-duplicate');
      marquee.appendChild(duplicate);
    });
  });

  const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      entry.target.querySelectorAll('[data-css-marquee-list]').forEach(list => {
        list.style.animationPlayState = entry.isIntersecting ? 'running' : 'paused';
      });
      entry.target.querySelectorAll('.marquee-duplicate').forEach(list => {
        list.style.animationPlayState = entry.isIntersecting ? 'running' : 'paused';
      });
    });
  }, { threshold: 0 });

  marquees.forEach(marquee => {
    // Recalculate duration using total width
    const totalWidth = Array.from(marquee.querySelectorAll('[data-css-marquee-list], .marquee-duplicate'))
      .reduce((sum, el) => sum + el.offsetWidth, 0);
    const duration = totalWidth / pixelsPerSecond;

    marquee.querySelectorAll('[data-css-marquee-list], .marquee-duplicate').forEach(list => {
      list.style.animationDuration = duration + 's';
      list.style.animationPlayState = 'paused';
    });

    observer.observe(marquee);
  });
}

// Wait until all resources (images/fonts) are loaded for correct width calculation
window.addEventListener('load', function() {
  initCSSMarquee();
});

// Also rerun when window is resized (for responsiveness)
window.addEventListener('resize', function() {
  initCSSMarquee();
});
</script>