JSFiddle - React, Tailwind, and code Playground

HTML

<div class="clearfix" id="content">
        <div data-transout="fly-left" class="animate" id="content-screen">
            <ul>
                <li>test1</li>
                <li>test2</li>
                <li>test3</li>
            </ul>
    </div>
    <div id="scroll-content" class="animate">
        test2        
    </div>
</div>

CSS

.animate {
 position:absolute;
 left:0;
 top:50px;    
}

JavaScript

$(document).ready(function() {
                    $.when( $('#content').ajaxTransitionOut() ).done(function() {                        
                        console.log('upper finished');
                    });

});
(function($){
    //Transition Out
    $.fn.ajaxTransitionOut = function() {

        $(this).find('.animate').each(function() {
                    $(this).animate({left:1000, opacity:0}, 400);
        });
        $(this).find('.animate').promise().done(function() {
            console.log('promise finished'); 
            return $(this).parents().promise();
            
         });

    };


})(jQuery);