JSFiddle - React, Tailwind, and code Playground

by Boris Šuška

HTML

<h1>Heading</h1>
Speed: <button class="speed" data-speed="0">Stop</button>
<button class="speed" data-speed="0.25">1/4</button>
<button class="speed" data-speed="1">x1</button>
<button class="speed" data-speed="4">x4</button>

JavaScript

// Update of Date class to modify getTime method.
Date.prototype.origGetTime = Date.prototype.getTime;
Date._speed = 1;
Date.prototype.getTime = function() {
    var pausedTime = (new Date).origGetTime();
    Date._curTime += (pausedTime - Date._lastTime) * Date._speed;
    Date._lastTime = pausedTime;
    return Date._curTime;
};
Date.isPaused = function() {
	return Date._speed === 0;
};
Date.speed = function(value) {
    if (typeof(value) != 'undefined') {
        Date._speed = value;
    }
    return Date._speed;
};
Date._curTime = Date._lastTime = (new Date).origGetTime();



// Start paused
Date.speed(0);

$(function() {
    // h1 element will be moved from lefto to right normally but not now, time is paused
    var animateToRight = function() {
            $('h1').animate({'marginLeft': 200}, 5000, animateToLeft);
        },
        animateToLeft = function() {
            $('h1').animate({'marginLeft': 0}, 5000, animateToRight);
        };
    animateToRight();
    
    $('.speed').click(function() {
        Date.speed($(this).data('speed'));
    });
});