方向によって左右から現れるカードリスト

<div class="d08-13-10-stage">
          <div class="d08-13-10-scroll">
            <div class="d08-13-10-body">
              <p>↓↑ スクロールしてカードの出現方向の違いを確認</p>
              <div class="d08-13-10-card">CARD 01</div>
              <div class="d08-13-10-card">CARD 02</div>
              <div class="d08-13-10-card">CARD 03</div>
              <div class="d08-13-10-card">CARD 04</div>
              <div class="d08-13-10-card">CARD 05</div>
            </div>
          </div>
        </div>

.prev.d08-13-10{padding:0;display:block}
        .d08-13-10-stage{position:relative;width:100%;height:100%;min-height:260px;overflow:hidden;background:#faf5ff}
        .d08-13-10-scroll{position:absolute;inset:0;overflow-y:auto}
        .d08-13-10-body{padding:16px}
        .d08-13-10-body p{font-size:11.5px;color:#6d28d9;margin:0 0 12px;text-align:center}
        .d08-13-10-card{
          height:60px;border-radius:10px;margin-bottom:12px;
          display:flex;align-items:center;justify-content:center;
          font-size:12px;font-weight:700;color:#fff;
          background:linear-gradient(135deg,#818cf8,#c084fc);
          opacity:0;transform:translateX(34px);
          transition:transform .4s cubic-bezier(.2,1,.3,1),opacity .4s;
        }
        .d08-13-10-card.from-left{transform:translateX(-34px)}
        .d08-13-10-card.is-in{opacity:1;transform:translateX(0)}

(function(){
        var stage=document.querySelector('.d08-13-10-stage');
        if(!stage)return;
        var scroller=stage.querySelector('.d08-13-10-scroll');
        var cards=stage.querySelectorAll('.d08-13-10-card');
        var last=0,dir='down';
        function reveal(){
          var rect=scroller.getBoundingClientRect();
          for(var i=0;i<cards.length;i++){
            var card=cards[i];
            if(card.classList.contains('is-in'))continue;
            var r=card.getBoundingClientRect();
            if(r.top<rect.bottom-16&&r.bottom>rect.top+16){
              if(dir==='up'){card.classList.add('from-left');void card.offsetWidth;}
              card.classList.add('is-in');
            }
          }
        }
        scroller.addEventListener('scroll',function(){
          var top=scroller.scrollTop;
          if(top>last+2)dir='down';else if(top<last-2)dir='up';
          last=top<=0?0:top;
          reveal();
        });
        reveal();
      })();