JSFiddle - React, Tailwind, and code Playground

by jashwant

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

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;
});

var isAnimating = false;
var proxyDelta = 0;
var t = null;

$('body').mousewheel(function (e, delta, deltaX, deltaY) {
    if (isAnimating) {
        return;
    }

    e.preventDefault();
    proxyDelta += delta;
    t = setTimeout(function () {
        clearTimeout(t);
        delta = proxyDelta;
		if(delta === 0) return;
        proxyDelta = 0;
        isAnimating = true;

        var delta = delta * -1;
        var counter = 0;
        var $points = $('.point');
        $points.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 deltaM = Math.abs(delta);
            var duration = 500 / deltaM;
            
            
            $this.animate({
                path: new $.path.arc(arc)
            }, duration, function () {
                if (++counter === $points.length) {
                    isAnimating = false;
                }
            });
        });
    }, 50);

});