'How to make a marquee animation which never leave the view blank ? With images

I am trying to make a marquee animation, but i can't manage to make it perfect. As you can see when a logo goes out of the page it do not get back from the otherside directly.

I would like that when a logo get out from left it has to get back from right instantly.

enter image description here

.logos {
    display: flex;
    width: 100%;
    justify-content: space-evenly;

    img {
        height: 25px;
        margin: 0 20px;
        animation: defile 3s infinite linear;
        position: relative;
    }
}
@keyframes defile {
        25% {left: 0%;}
        50% {left: 100%;}
        75% {right: 100%;}
        100% {right: 0%;}
}

<div className="logos pt-5" >
    <img src="static/img/logos/NEXTJS.png" />
    <img src="static/img/logos/SOCKET.IO.png" />
    <img src="static/img/logos/NODEJS.png" />
    <img src="static/img/logos/JS.png" />
    <img src="static/img/logos/GIT.png" />
    <img src="static/img/logos/NANTES-TECH.png" />
    <img src="static/img/logos/FRENCHTECH.png" />
    <img src="static/img/logos/ANGULAR.png" />
    <img src="static/img/logos/S.png" />
    <img src="static/img/logos/DOCKER.png" />
    <img src="static/img/logos/REACT.png" />
    <img src="static/img/logos/REACT-ROUTER.png" />
</div>
javascripthtmlcssreactjsanimation


Solution 1:[1]

I found that project https://github.com/mxmzb/react-marquee-slider. Which allow me to do what I exactly wanted

Here is the result https://cargouet.com/

Solution 2:[2]

Have you tried doing something like:

@keyframes defile {
    0% { left: 0% }
    50% { left: 100% }
    51% { right: 100%; }
    100% { right: 0%; }
}

The main issue with what you have for me right now is that it takes 25% of the animation to change from left: 100% to right: 100%; I think this might be what's not working for you.

UPDATE

I checked for some other option and maybe this script could do the trick for you.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2

Related Questions