JSFiddle - React, Tailwind, and code Playground

by jasper

HTML

<div id="div"></div>

CSS

div {
    position   : absolute;
    background : #999;
    width      : 5px;
    height     : 5px;
    display    : block;
}
#div {
    position : absolute;
    left     : 0;
    top      : 300px;
    width    : 50px;
    height   : 50px;
    border   : 1px solid #000;
    display  : none;
}

JavaScript

jQuery(function ($) {
    var time_360     = 3600,
        distance_360 = 500,//px
        frames_360   = 360,
        curr_frame   = 1,
        states       = [ '-', '+', '-', '+' ];
    
    function sine_animation ($obj) {
        console.log(Math.sin(Math.PI / 2) * curr_frame / frames_360 * 360);
        var state = Math.ceil(3.6 / frames_360 * curr_frame) - 1;
        if (curr_frame < frames_360) {
            //console.log(state );
            /*
            $obj.animate({
                top  : states[state] + '=' + (Math.sin(1 / frames_360) * 150),
                left : '+=' + (distance_360 / 360)
            }, (time_360 / 360), function () {
                curr_frame++;
                sine_animation($obj);
            });
            */
            $('body').append('<div style="top: ' + (Math.sin(curr_frame) * 20 + 300) + 'px; left: ' + Math.round(distance_360 / 360 * curr_frame * 5) + 'px;"></div>');
            curr_frame++;
            sine_animation($obj);
        }
    }
    sine_animation($('#div'));
});