Jump to content

Infinite Scroll

Recommended Posts

Hi, I need help making this scroll effect infinite and smooth - right now it's not quite lining up with the animation resetting.
Ideally I'd love to have the animation restart as the old one ends, creating the loop effect.

Any help here is appreciated!

Here is the code for reference:

<div class="scrolling-logos">
    <div class="logo-strip">
        <!-- First set of logos -->
        <img src="https://images.squarespace-cdn.com/content/654509262f9f1d72b50ce35c/373f31f3-9272-4255-be8f-d66f24f0cc69/cashco-logo-colour.png" alt="Cashco Logo">
        <img src="https://images.squarespace-cdn.com/content/654509262f9f1d72b50ce35c/9f68db32-8cf2-4ece-8cb2-c6452d958d6f/convrg-logo.png" alt="Convrg Logo">
        <img src="https://images.squarespace-cdn.com/content/654509262f9f1d72b50ce35c/3eb4ccb5-064b-40fe-aea6-764c0833b61d/uofa-if-logo-green.png" alt="University of Alberta IF Logo">
        <img src="https://images.squarespace-cdn.com/content/654509262f9f1d72b50ce35c/b408456d-b92a-47c3-8791-ae0d90b48c7f/inter-rail-logo.png" alt="Inter-Rail Logo">
        <img src="https://images.squarespace-cdn.com/content/654509262f9f1d72b50ce35c/df2b7e07-a795-44ed-a68c-a4f526a9fe79/kcpa-colour-logo.png" alt="KCPA Logo">
        <img src="https://images.squarespace-cdn.com/content/654509262f9f1d72b50ce35c/ff092094-cb57-4682-b912-0de20c8d7b87/DriftGolfLogoColor+1.png" alt="Drift Golf Logo">
        <img src="https://images.squarespace-cdn.com/content/654509262f9f1d72b50ce35c/fb2ccf9e-ba44-4c1b-be55-335c88044c86/Akash-homes_logo.png" alt="Akash Homes Logo">
        <img src="https://images.squarespace-cdn.com/content/654509262f9f1d72b50ce35c/c5cb7b1a-5065-470e-a8d7-cf5729917ec0/Agri-Gate+Logo.png" alt="Agri-Gate Logo">
        <!-- Repeat the same set of logos for a seamless transition -->
        <img src="https://images.squarespace-cdn.com/content/654509262f9f1d72b50ce35c/373f31f3-9272-4255-be8f-d66f24f0cc69/cashco-logo-colour.png" alt="Cashco Logo">
        <img src="https://images.squarespace-cdn.com/content/654509262f9f1d72b50ce35c/9f68db32-8cf2-4ece-8cb2-c6452d958d6f/convrg-logo.png" alt="Convrg Logo">
        <img src="https://images.squarespace-cdn.com/content/654509262f9f1d72b50ce35c/3eb4ccb5-064b-40fe-aea6-764c0833b61d/uofa-if-logo-green.png" alt="University of Alberta IF Logo">
        <img src="https://images.squarespace-cdn.com/content/654509262f9f1d72b50ce35c/b408456d-b92a-47c3-8791-ae0d90b48c7f/inter-rail-logo.png" alt="Inter-Rail Logo">
        <img src="https://images.squarespace-cdn.com/content/654509262f9f1d72b50ce35c/df2b7e07-a795-44ed-a68c-a4f526a9fe79/kcpa-colour-logo.png" alt="KCPA Logo">
        <img src="https://images.squarespace-cdn.com/content/654509262f9f1d72b50ce35c/ff092094-cb57-4682-b912-0de20c8d7b87/DriftGolfLogoColor+1.png" alt="Drift Golf Logo">
        <img src="https://images.squarespace-cdn.com/content/654509262f9f1d72b50ce35c/fb2ccf9e-ba44-4c1b-be55-335c88044c86/Akash-homes_logo.png" alt="Akash Homes Logo">
        <img src="https://images.squarespace-cdn.com/content/654509262f9f1d72b50ce35c/c5cb7b1a-5065-470e-a8d7-cf5729917ec0/Agri-Gate+Logo.png" alt="Agri-Gate Logo">
    </div>
</div>



<style>
/* Existing CSS for desktop and common styles */

.scrolling-logos {
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    line-height: 0; /* Remove space between inline-block elements */
}

.logo-strip {
    display: flex;
    align-items: center;
    animation: scroll-logos 15s linear infinite;
}

.logo-strip img {
    min-width: 200px; /* Minimum width for all logos */
    height: auto;
    margin-right: 30px;
}

/* Keyframes for desktop */
@keyframes scroll-logos {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%); /* Assuming the logos are duplicated */
    }
}

/* Media query for mobile devices */
@media screen and (max-width: 600px) {
    .logo-strip img {
        min-width: 150px; /* Smaller size on mobile */
        margin-right: 15px; /* Less space between logos on mobile */
    }

    .logo-strip {
        animation: scroll-logos-mobile 15s linear infinite;
    }

    /* Keyframes for mobile */
    @keyframes scroll-logos-mobile {
        0% { transform: translateX(0); }
        100% { transform: translateX(-2640px); } /* Double the total width of one set of logos */
    }
}

/* Additional styles */
.scrolling-logos::before,
.scrolling-logos::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px; /* Width of the fade effect */
    z-index: 2;
    pointer-events: none;
}

.scrolling-logos::before {
    left: 0;
    background: linear-gradient(to right, white, transparent);
}

.scrolling-logos::after {
    right: 0;
    background: linear-gradient(to left, white, transparent);
}

.logo-strip.active { /* Class to stop animation when dragging */
    animation-play-state: paused;
}

.logo-strip:hover {
    animation-play-state: paused; /* Optional: Pause animation on hover */
}

</style>

 

Link to comment
  • Replies 3
  • Views 1.4k
  • Created
  • Last Reply

Top Posters In This Topic

  • 3 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.