JSFiddle - React, Tailwind, and code Playground

HTML

<!-- PLUGINS -->
<script>
    (function(b) {
        b.path = {};
        var a = {
            rotate: function(f, g) {
                var e = g * Math.PI / 180,
                    h = Math.cos(e),
                    d = Math.sin(e);
                return [h * f[0] - d * f[1], d * f[0] + h * f[1]]
            },
            scale: function(c, d) {
                return [d * c[0], d * c[1]]
            },
            add: function(d, c) {
                return [d[0] + c[0], d[1] + c[1]]
            },
            minus: function(d, c) {
                return [d[0] - c[0], d[1] - c[1]]
            }
        };
        b.path.bezier = function(h, e) {
            h.start = b.extend({
                angle: 0,
                length: 0.3333
            }, h.start);
            h.end = b.extend({
                angle: 0,
                length: 0.3333
            }, h.end);
            this.p1 = [h.start.x, h.start.y];
            this.p4 = [h.end.x, h.end.y];
            var d = a.minus(this.p4, this.p1),
                f = a.scale(d, h.start.length),
                c = a.scale(d, -1),
                g = a.scale(c, h.end.length);
            f = a.rotate(f, h.start.angle);
            this.p2 = a.add(this.p1, f);
            g = a.rotate(g, h.end.angle);
            this.p3 = a.add(this.p4, g);
            this.f1 = function(i) {
                return (i * i * i)
            };
            this.f2 = function(i) {
                return (3 * i * i * (1 - i))
            };
            this.f3 = function(i) {
                return (3 * i * (1 - i) * (1 - i))
            };
            this.f4 = function(i) {
                return ((1 - i) * (1 - i) * (1 - i))
            };
            this.css = function(l) {
                var i = this.f1(l),
                    n = this.f2(l),
                    m = this.f3(l),
                    k = this.f4(l),
                    j = {};
                if (e) {
                    j.prevX = this.x;
             ...

CSS

html, body {
     overflow: hidden;
     height: 100%;
 }
 .point {
     position: absolute;
     background: rgb(30, 180, 156);
     border-radius: 50%;
     width: 20px;
     height: 20px;
     padding: 4px;
     text-align: center;
     color: #fff;
 }
 #arrow {
     position: absolute;
     top: 50%;
     height: 20px;
     margin-top: -10px;
     left: 120px;
 }

JavaScript

$.easing.easeOutQuad = function (x, t, b, c, d) {
    return -c *(t/=d)*(t-2) + b;
};


var arc = {
    center: [-200, ($(window).height() - 24) / 2],
    // height + padding
    radius: 450,
    start: 0,
    end: 90,
    dir: 1
}

$('.point').each(function () {
    $(this).data('lastEnd', arc.end).animate({
        path: new $.path.arc(arc)
    }, 0);

    arc.start -= 10;
    arc.end -= 8;
});

$('body').mousewheel(function (e, delta, deltaX, deltaY) {
    e.preventDefault();
    var delta = delta * -1;
    $('.point').each(function () {
        var $this = $(this);
        var startPoint = $this.data('lastEnd');
        var arc = {
            center: [-200, ($(window).height() - 24) / 2],
            radius: 450,
            start: startPoint,
            end: (delta * 8) + startPoint,
            dir: delta > 0 ? 1 : -1
        }
        $this.data('lastEnd', arc.end);

        var path = new $.path.arc(arc);
        $this.stop().animate(path.css(delta-1), 500, 'easeOutQuad');
    });
});