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;
    width: 800px;
}
.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();

    /**@last 2 parameters of scrollTransition:
     * :easingEffect = name of easing effect you want to apply
     * :plus={-1,0,1} with
     *
     * 0     -> do not apply the external easing effect
     * -1    -> substract the external easing effect 
     * 1     -> add the external easing effect
    */
    
    $(".element").css({
        "opacity": 1-scrollTransition(0, 1, 0, 400, scrollTop, "easeInSine", 1),
        "left": scrollTransition(300, -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);
    }
    
    switch (easingEffect) //Yeah..... this had to be done manually :(
    {
        case "easeOutQuad": 
            sum += plus*easeOutQuad(null, scrollTop, startValue, endValue, distance);      
            break;
        case "easeInQuad": 
            sum += plus*easeInQuad(null, scrollTop, startValue, endValue, distance);
            break;  
        case "easeOutQuad": 
            sum += plus*easeOutQuad(null, scrollTop, startValue, endValue, distance);
            break;  
        case "easeInOutQuad": 
            sum += plus*easeInOutQuad(null, scrollTop, startValue, endValue, distance);
            break;  
        case "easeInCubic": 
            sum += plus*easeInCubic(null, scrollTop, startValue, endValue, distance);
            break;  
        case "easeOutCubic": 
            sum += plus*easeOutCubic(null, scrollTop, startValue, endValue, distance);
           ...