JSFiddle - React, Tailwind, and code Playground

by lucuma

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

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

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

    };

})(jQuery);

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

});