0

I've been trying to reproduce the effect that is used on the Apple TV Plus page with the different movies and shows available, there's a sort of "linear" animation with an infinite content and on hover it's slowing down.

(https://www.apple.com/apple-tv-plus/)

Yet I have used a simple code that was posted a decade ago on a code website but I think it's not the right option since, with that, I haven't been able to make it with a really "infinite" effect like once the last item of the list is reaching the left border of the page, it restart instead of doing its cycle. Plus I've tried to slow down the animation on hover but it just jump on the page without transition or what ever. I'm kinda lost and very newbie so I would really appreciate any help on that.

Here's my code :

@keyframes defilement-rtl {
  0% {
    transform: translate3d(0,0,0);      /* position initiale à droite */
  }
  100% {
    transform: translate3d(-100%,0,0);  /* position finale à gauche */
  }
}

article.head-explore {
        overflow: hidden;
        max-width: 100%;
        padding-top: 150px;
        padding-bottom: 40px;
        background-image: -moz-radial-gradient( 50% 50%, circle closest-side, rgb(54,56,63) 0%, rgb(26,29,34) 50%, rgb(0,0,0) 100%);
        background-image: -webkit-radial-gradient( 50% 50%, circle closest-side, rgb(54,56,63) 0%, rgb(26,29,34) 50%, rgb(0,0,0) 100%);
        background-image: -ms-radial-gradient( 50% 50%, circle closest-side, rgb(54,56,63) 0%, rgb(26,29,34) 50%, rgb(0,0,0) 100%);
        background-color: black;
        text-align: center;
    }

            article.head-explore h1 {
                margin-bottom: 150px;
                line-height: 90px;
                font-weight: 600;
                font-size: 80px;
                text-align: center;
            }

            article.head-explore ul.bots-row-1,
            article.head-explore ul.bots-row-2 {
                width: auto;
                display: flex;
                flex-direction: row;
                height: 212px;
                color: black;
                transition: 0.2s all;
            }

            article.head-explore ul.bots-row-1 {
                margin-bottom: 20px;
                animation: defilement-rtl 20s infinite linear;
            }

            article.head-explore ul.bots-row-2 {
                animation: defilement-rtl 30s infinite linear;
                margin-bottom: 40px;
            }
            
                    article.head-explore ul.bots-row-1 li,
                    article.head-explore ul.bots-row-2 li {
                        margin-right: 20px;
                        width: 350px;
                        display: flex;
                        flex-shrink: 0;
                        justify-content: center;
                        align-items: center;
                        background-color: red;
                        border-radius: 30px;
                    }
          
          article.head-explore ul.bots-row-1:hover {
          animation: defilement-rtl 30s infinite linear;
          }
          
          article.head-explore ul.bots-row-2:hover {
          animation: defilement-rtl 40s infinite linear;
          }
    <article class="head-explore">
        <h1>Discover all new<br>opportunities</h1>
        <ul class="bots-row-1">
            <li></li>
            <li></li>
            <li></li>
      <li></li>
            <li></li>
            <li></li>
        </ul>
        <ul class="bots-row-2">
            <li></li>
            <li></li>
            <li></li>
      <li></li>
            <li></li>
            <li></li>
        </ul>
        <a href="">See full bot list <img src="./arrow.svg"/></a>
    </article>
LawlietKM
  • 9
  • 1

1 Answers1

0

You can't do what you want with css animation. there's no way you can make an "infinite" transition "reloading" the content queue after last module. But could be no difficult with a carousel / slider library.

I always use slike slider as it's, for me, one of the easiest to implement, simple to make it work but still have tons of options to customize it easily.

Check the example I have made for you in this JSfiddle

But... you may need to work with a bit of javascript if you want to manipulate the animation speed on hover. right in the Fiddle is 2000. You may need to use there a variable with a diferent value if hover on the slider.

Alvaro Menéndez
  • 8,766
  • 3
  • 37
  • 57
  • Please don't provide answers with JSFiddle links unless you also put the relevant code in the answer itself. Link-only answers rot over time and lose value. – TylerH Aug 14 '20 at 16:21
  • I didn't "solve" the user problem as i think there's no solution with `css animation` and so I posted. The JSfiddle is not any "relevant code" nor it provides any valid answer, it's just an example provided as to how I would focus the problem if I were him, so "rot over time" is not an issue. However, I have many answers from years ago with plenty of JSfiddle links... answers posted before the "code snippet" were implemented... and, as today, I have never seen any of these links broken – Alvaro Menéndez Aug 14 '20 at 16:29
  • Anecdotes are irrelevant; JSFiddle does and has gone down. At any rate, if the code in your JSFiddle is irrelevant then why provide a link to it in your answer? – TylerH Aug 14 '20 at 18:12
  • ngl that didn't help me much – LawlietKM Aug 14 '20 at 19:23