JSFiddle - React, Tailwind, and code Playground

by zono

HTML

<img id="firstPaw" class="pawImage" src="http://cliparts.co/cliparts/kiM/nMG/kiMnMG8KT.svg"/>
<img id="secondPaw" class="pawImage" src="http://cliparts.co/cliparts/kiM/nMG/kiMnMG8KT.svg"/>

CSS

.pawImage {
            width: 70px;
            position: absolute;
        }

        #firstPaw {
            top: 90%;
            right: 0%;
        }

        #secondPaw {
            top: 90%;
            right: 70px;
        }

JavaScript

var firstStep = (function() {
	var defer = $.Deferred();
	
	$('#firstPaw').animate({top: "70%",right: "10%"}, 1000, function() {
		$('#secondPaw').animate({top: "70%",right: "30%"}, 1000, function() {
			
		    defer.resolve();
	    });
	});
	
	return defer.promise();
})();

var secondStep = (function() {
	var defer = $.Deferred();
	
	firstStep.done(function() {
		$('#firstPaw').animate({top: "50%",right: "30%"}, 1000, function() {
			$('#secondPaw').animate({top: "50%",right: "50%"}, 1000, function() {
				defer.resolve();
			});
		});
	});
	
	return defer.promise();
})();

var thirdStep = (function() {
	var defer = $.Deferred();
	
	secondStep.done(function() {
		$('#firstPaw').animate({top: "30%",right: "40%"}, 1000, function() {
			$('#secondPaw').animate({top: "30%",right: "60%"}, 1000, function() {
				defer.resolve();
			});
		});
	});
	
	return defer.promise();
})();

var fourthStep = (function() {
	var defer = $.Deferred();
	
	thirdStep.done(function() {
		$('#firstPaw').animate({top: "10%",right: "60%"}, 1000, function() {
			$('#secondPaw').animate({top: "10%",right: "80%"}, 1000, function() {
				defer.resolve();
			});
		});
	});
	
	return defer.promise();
})();