Kevin Powell - Community•12mo ago

infinite carousel animation

I've been trying to recreate this animation from https://nuxt.com/ from this page and I've got it somewhat working but can't seem to get it working in the reverse direction and everything just breaks on smaller screen sizes - provided the code down below-

Nuxt

Nuxt: The Intuitive Web Framework

Build your next Vue.js application with confidence using Nuxt. An open source framework under MIT license that makes web development simple and powerful.

1 Reply

Ard Astroid•12mo ago

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <div class="container">
        <nav><h1></h1></nav>
        <div class="infinit-logo-wrapper">
            <div class="logo-track animate">
                <div class="logo-track-slide">
                    <a href="#"> <img class="track-slide-logo" src="./assets/algolia.webp" alt=""></a>
                    <a href="#"> <img class="track-slide-logo" src="./assets/content.webp" alt=""></a>
                    <a href="#"> <img class="track-slide-logo" src="./assets/formkit.webp" alt=""></a>
                    <a href="#"> <img class="track-slide-logo" src="./assets/harlem.webp" alt=""></a>
                    <a href="#"> <img class="track-slide-logo" src="./assets/i18n.webp" alt=""></a>
                    <a href="#"> <img class="track-slide-logo" src="./assets/sanity.webp" alt=""></a>
                    <a href="#"> <img class="track-slide-logo" src="./assets/strapi.webp" alt=""></a>
                </div>
                <div class="logo-track-slide">
                    <a href="#"> <img class="track-slide-logo" src="./assets/algolia.webp" alt=""></a>
                    <a href="#"> <img class="track-slide-logo" src="./assets/content.webp" alt=""></a>
                    <a href="#"> <img class="track-slide-logo" src="./assets/formkit.webp" alt=""></a>
                    <a href="#"> <img class="track-slide-logo" src="./assets/harlem.webp" alt=""></a>
                    <a href="#"> <img class="track-slide-logo" src="./assets/i18n.webp" alt=""></a>
                    <a href="#"> <img class="track-slide-logo" src="./assets/sanity.webp" alt=""></a>
                    <a href="#"> <img class="track-slide-logo" src="./assets/strapi.webp" alt=""></a>
                </div>
                <div class="logo-track-slide">
                    <a href="#"> <img class="track-slide-logo" src="./assets/algolia.webp" alt=""></a>
                    <a href="#"> <img class="track-slide-logo" src="./assets/content.webp" alt=""></a>
                    <a href="#"> <img class="track-slide-logo" src="./assets/formkit.webp" alt=""></a>
                    <a href="#"> <img class="track-slide-logo" src="./assets/harlem.webp" alt=""></a>
                    <a href="#"> <img class="track-slide-logo" src="./assets/i18n.webp" alt=""></a>
                    <a href="#"> <img class="track-slide-logo" src="./assets/sanity.webp" alt=""></a>
                    <a href="#"> <img class="track-slide-logo" src="./assets/strapi.webp" alt=""></a>
                </div>
            </div>
        </div>

        <footer><h1></h1></footer>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <div class="container">
        <nav><h1></h1></nav>
        <div class="infinit-logo-wrapper">
            <div class="logo-track animate">
                <div class="logo-track-slide">
                    <a href="#"> <img class="track-slide-logo" src="./assets/algolia.webp" alt=""></a>
                    <a href="#"> <img class="track-slide-logo" src="./assets/content.webp" alt=""></a>
                    <a href="#"> <img class="track-slide-logo" src="./assets/formkit.webp" alt=""></a>
                    <a href="#"> <img class="track-slide-logo" src="./assets/harlem.webp" alt=""></a>
                    <a href="#"> <img class="track-slide-logo" src="./assets/i18n.webp" alt=""></a>
                    <a href="#"> <img class="track-slide-logo" src="./assets/sanity.webp" alt=""></a>
                    <a href="#"> <img class="track-slide-logo" src="./assets/strapi.webp" alt=""></a>
                </div>
                <div class="logo-track-slide">
                    <a href="#"> <img class="track-slide-logo" src="./assets/algolia.webp" alt=""></a>
                    <a href="#"> <img class="track-slide-logo" src="./assets/content.webp" alt=""></a>
                    <a href="#"> <img class="track-slide-logo" src="./assets/formkit.webp" alt=""></a>
                    <a href="#"> <img class="track-slide-logo" src="./assets/harlem.webp" alt=""></a>
                    <a href="#"> <img class="track-slide-logo" src="./assets/i18n.webp" alt=""></a>
                    <a href="#"> <img class="track-slide-logo" src="./assets/sanity.webp" alt=""></a>
                    <a href="#"> <img class="track-slide-logo" src="./assets/strapi.webp" alt=""></a>
                </div>
                <div class="logo-track-slide">
                    <a href="#"> <img class="track-slide-logo" src="./assets/algolia.webp" alt=""></a>
                    <a href="#"> <img class="track-slide-logo" src="./assets/content.webp" alt=""></a>
                    <a href="#"> <img class="track-slide-logo" src="./assets/formkit.webp" alt=""></a>
                    <a href="#"> <img class="track-slide-logo" src="./assets/harlem.webp" alt=""></a>
                    <a href="#"> <img class="track-slide-logo" src="./assets/i18n.webp" alt=""></a>
                    <a href="#"> <img class="track-slide-logo" src="./assets/sanity.webp" alt=""></a>
                    <a href="#"> <img class="track-slide-logo" src="./assets/strapi.webp" alt=""></a>
                </div>
            </div>
        </div>

        <footer><h1></h1></footer>
    </div>
</body>
</html>

:root{
    --clr-dark-0: #0c0c0d;
    --clr-dark-0-rgba: 12, 12, 13;
    --clr-dark-1: #18181b;
    --clr-dark-1-rgba: 24, 24, 27;
    --clr-accent-1: ;
    --transition-speed: 250ms;
}

html{
    color-scheme: dark;
    scroll-behavior: smooth;
}

*, *::selection, *::before, *::after{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body{
    width: 100vw;
    overflow-x: hidden;
    background-color: var(--clr-dark-0);
    font-family: sans-serif;
}

a{
    text-decoration: none;
    color: inherit;
}
img{
    width: 100%;
}


.container{
    max-width: 1366px;
    min-height: 100vh;
    margin: 0  auto;
    padding: 0 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}


/* brands css start */
.infinit-logo-wrapper{
    overflow-x: hidden;
    position: relative;
    width: 100%;
}
.logo-track{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    width: 200%;
    gap: 1rem;
}

.logo-track-slide{

    display: flex;
    /* width: 50%; */
    gap: 1rem;
    justify-content: space-around;
}

.logo-track-slide a{
    display: grid;
    place-items: center;
    max-width: 150px;
    padding: 1rem;
    border-radius: 7px;
    aspect-ratio: 1;
    background-color: var(--clr-dark-1);
    transition: var(--transition-speed);
}
.track-slide-logo{
    min-width: 45px;
    max-width: 60px;
    aspect-ratio: 1;
    transition: var(--transition-speed);
}

/* .animate{
    animation: slide 10s infinite linear;
} */
@keyframes slide {
0% {
        left: 0;
    }
    100% {
        left: -100%;
    }
}
.animate {
    animation: slide  10s linear infinite;
    position: relative;
}

@media (max-width: 900px) {
    .logo-track{
        width: 400%;

    }
    @keyframes slide {
        0% {
                left: 0;
            }
            100% {
                left: -200%;
            }
        }
}

:root{
    --clr-dark-0: #0c0c0d;
    --clr-dark-0-rgba: 12, 12, 13;
    --clr-dark-1: #18181b;
    --clr-dark-1-rgba: 24, 24, 27;
    --clr-accent-1: ;
    --transition-speed: 250ms;
}

html{
    color-scheme: dark;
    scroll-behavior: smooth;
}

*, *::selection, *::before, *::after{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body{
    width: 100vw;
    overflow-x: hidden;
    background-color: var(--clr-dark-0);
    font-family: sans-serif;
}

a{
    text-decoration: none;
    color: inherit;
}
img{
    width: 100%;
}


.container{
    max-width: 1366px;
    min-height: 100vh;
    margin: 0  auto;
    padding: 0 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}


/* brands css start */
.infinit-logo-wrapper{
    overflow-x: hidden;
    position: relative;
    width: 100%;
}
.logo-track{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    width: 200%;
    gap: 1rem;
}

.logo-track-slide{

    display: flex;
    /* width: 50%; */
    gap: 1rem;
    justify-content: space-around;
}

.logo-track-slide a{
    display: grid;
    place-items: center;
    max-width: 150px;
    padding: 1rem;
    border-radius: 7px;
    aspect-ratio: 1;
    background-color: var(--clr-dark-1);
    transition: var(--transition-speed);
}
.track-slide-logo{
    min-width: 45px;
    max-width: 60px;
    aspect-ratio: 1;
    transition: var(--transition-speed);
}

/* .animate{
    animation: slide 10s infinite linear;
} */
@keyframes slide {
0% {
        left: 0;
    }
    100% {
        left: -100%;
    }
}
.animate {
    animation: slide  10s linear infinite;
    position: relative;
}

@media (max-width: 900px) {
    .logo-track{
        width: 400%;

    }
    @keyframes slide {
        0% {
                left: 0;
            }
            100% {
                left: -200%;
            }
        }
}

Gaming

Programming

infinite carousel animation