JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container" ng-app ng-controller="Foo">
    <div class="item"
        ng-repeat="item in items" 
        ng-style="{'top': item.top + 'px'}">{{item.name}}
    </div>
</div>

CSS

body, html {
    min-height: 100%;
    height: 100%;
    overflow: hidden;
}

.container {
    height: 100%;
}

.item {
    position: absolute;
    width: 200px;
    height: 50px;
    background-color: lightblue;
    box-shadow: 2px 2px 5px black;
    margin-bottom: 5px;
    text-align: center;
    line-height: 50px;
    box-sizing: border-box;
}

JavaScript

function Foo($scope) {
    $scope.items = [
        { name: "Dasher" },
        { name: "Dancer" },
        { name: "Prancer" },
        { name: "Vixen" },
        { name: "Comet" },
        { name: "Cupid" },
        { name: "Donner" },
        { name: "Blitzen" },
        { name: "Rudolph" }
    ];

    var height = 50;
    var margin = 5;
    var velocity = 2;
    
    $scope.items.forEach(function(item, idx) {
        item.h = height;
        item.top = idx * (height + margin);
        console.log(item);
    });

    var tick = function() {
        $scope.$apply(function() {
            $scope.items.forEach(function(item, idx) {
                item.top -= velocity;
                if (item.top < -(height + margin)) {
                    item.top += $scope.items.length * (height + margin);
                }
            });
        });
        requestAnimationFrame(tick);
    };
    
    requestAnimationFrame(tick);    
}