Scroll with multiple, and going different directions

Question

I have a large image of an L-shaped painting on one page. I created divs over parts of the painting I want to explain. When the page loads, I want it to scroll down the length of the image, and then move to the left of the image, stopping at each div for a few seconds. I understand how to get the page to scroll down on load, but I do not understand how to continue scrolling once it has reached the first div. Should I target the data-box and not the class, so it will continue to move through each div box?

 <div class=" box totem">
 <span class="hoverTotem" data-box="totem" ></span>
 </div>
 <!-- ganesh -->
 <div class="focus box ganesh">
 <span data-box="ganesh" ></span>
 </div>
 <!-- BIRD 1 -->
 <div class="box bird1">
 <span data-box="bird1" ></span>
 </div>
 <!-- KATY -->
 <div class="box katy">
 <span data-box="katy" ></span>
 </div>
 <!-- FREDIA -->
 <div class="box fredia">
 <span data-box="fredia" ></span>
 </div> 
 <!-- saar -->
 <div class="box saar">
 <span data-box="saar" ></span>
 </div>
 <!-- parks -->
 <div class="box parks">
 <span data-box="parks" ></span>
 </div>
 <!-- james -->
 <div class="box james">
 <span data-box="james" ></span>
 </div> 
 <!-- ANNA -->
 <div class="box anna">
 <span data-box="anna" ></span>
 </div> 
 <!-- ANDY -->
 <div class="box andy">
 <span data-box="andy" ></span>
 </div> 
 <!-- AI -->
 <div class="box ai">
 <span data-box="ai" ></span>
 </div>
 <!-- FRIENDS -->
 <div class="box friends1">
 <span data-box="friends1" ></span>
 </div>
 <div class="friends2">
 <span data-box="friends2" ></span>
 </div>
 <div class="box friends3">
 <span data-box="friends3" ></span>
 </div> 
 <!-- KIDS -->
 <div class="box kids">
 <span data-box="kids" ></span>
 </div> 
 <!-- PARENTS --> 
 <div class="box parents">
 <span data-box="parents" ></span>
 </div> 
 <!-- QUOTE --> 
 <div class="box quote">
 <span data-box="quote" ></span>
 </div> 
 <!-- BIRD 2 -->
 <div class="box bird2">
 <span data-box="box bird2" ></span>
 </div> 
</div>
<div class="container-fluid">
 <div id="" class="row meaningImg">
 <div class="background"> 
 <a href="../public/img/TALLPART1.png">
 <img class="" src="../public/img/TALLPART1.png" class="meaningImg">
 </a>
 </div>
 </div>
</div> 
<script>
 $(document).ready(function(){
 $('html, body').animate({
 scrollTop: $(".bird1").offset().top}, 5000),
 scrollLeft: $('.quote').offset().top}, 5000);
});
</script>

Answer 1

Ok, I got my code to work.

I kept my HTML the same but made a few changes to my jQuery.

 $(document).ready(function(){
$('html, body').animate({
 scrollTop: $(".ganesh").offset().top,
}, 5000).animate({
 scrollLeft: $(".bird1").offset().left,
}, 5000).animate({
 scrollLeft: $(".saar").offset().left,
}, 5000).animate({
 scrollLeft: $(".anna").offset().left,
}, 5000).animate({
 scrollLeft: $(".friends1").offset().left,
}, 5000).animate({
 scrollLeft: $(".quote").offset().left,
}, 5000);
});