JSFiddle - React, Tailwind, and code Playground

HTML

<div class="element">Scroll down</div>

<!--
//x = null;
//t = currentTime;
//b = begin;
//c = end;
//d = distance;
-->

CSS

body {
    height: 2000px;
}
.element {
    position: absolute;
    top: 300px;
    left: 0;
    background: #000;
    height: 50px;
    width: 200px;
    color: #fff;
}

JavaScript

var
    $window = $(window);
    
$window.on("scroll", function () {
    
    var scrollTop = $window.scrollTop();
    
    $(".element").css({
        "opacity": 1-scrollTransition(0, 1, 0, 400, scrollTop, "easeInSine", 1),
        "left": scrollTransition(0, 200, 0, 300, scrollTop, "easeOutBounce", 1)
    });
});

function scrollTransition(startValue, endValue, initScroll, distance, scrollTop, easingEffect, plus) {
    var
        min = Math.min,
        max = Math.max,
        sum;

    if(startValue > endValue) {
        sum = min(max((endValue - startValue) / distance * (scrollTop - initScroll) + startValue, endValue), startValue);
    } else {
        sum = min(max((endValue - startValue) / distance * (scrollTop - initScroll) + startValue, startValue), endValue);
    }
    
    var call = eval(easingEffect);
    sum += call(null, scrollTop, startValue, endValue, distance);
    
    return sum;
}

//Changed easing file:

	function easeOutQuad(x, t, b, c, d) {
		//alert(jQuery.easing.default);
		return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
	}
	function easeInQuad(x, t, b, c, d) {
		return c*(t/=d)*t + b;
	}
	function easeOutQuad(x, t, b, c, d) {
		return -c *(t/=d)*(t-2) + b;
	}
	function easeInOutQuad(x, t, b, c, d) {
		if ((t/=d/2) < 1) return c/2*t*t + b;
		return -c/2 * ((--t)*(t-2) - 1) + b;
	}
	function easeInCubic(x, t, b, c, d) {
		return c*(t/=d)*t*t + b;
	}
	function easeOutCubic(x, t, b, c, d) {
		return c*((t=t/d-1)*t*t + 1) + b;
	}
	function easeInOutCubic(x, t, b, c, d) {
		if ((t/=d/2) < 1) return c/2*t*t*t + b;
		return c/2*((t-=2)*t*t + 2) + b;
	}
	function easeInQuart(x, t, b, c, d) {
		return c*(t/=d)*t*t*t + b;
	}
	function easeOutQuart(x, t, b, c, d) {
		return -c * ((t=t/d-1)*t*t*t - 1) + b;
	}
	function easeInOutQuart(x, t, b, c, d) {
		if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
		return -c/2 * ((t-=2)*t*t*t - 2) + b;
	}
	function easeInQuint(x, t, b, c, d) {
		return c*(t/=d)*t*t*t*t + b;
	}
	function easeOutQuint(x, t, b, c,...