<figure>

  <ul class="photos">
    <li><img src="https://www.andyhullinger.com/china1830/pic1.jpg" /></li>
    <li><img src="https://www.andyhullinger.com/china1830/pic2.jpg" /></li>
    <li><img src="https://www.andyhullinger.com/china1830/pic3.jpg" /></li>
    <li><img src="https://www.andyhullinger.com/china1830/pic4.jpg" /></li>
  </ul>

  <div class="china">
    <img class="map" src="https://www.andyhullinger.com/china1830/mapchina.png" />
    <img class="flag" src="https://www.andyhullinger.com/china1830/flagchina.png" />
  </div>

  <div class="us">
    <img class="map" src="https://www.andyhullinger.com/china1830/mapus.png" />
    <img class="flag" src="https://www.andyhullinger.com/china1830/flagus.png" />
  </div>

  <img class="boat" src="https://www.andyhullinger.com/china1830/boat.png" />

</figure>

body {
  min-height:100vh;
  background-color: silver;
  display: grid;
  place-items: center;
}

figure {
  position: relative;
  width: 700px;
  height: 500px;
  margin: 20px auto;
  border: 4px solid black;
  background-color: #99ccff;
  overflow: hidden;
}

/* set up for parent/child positioning */
.china,
.us,
.photos,
.boat,
.flag,
li {
  position: absolute;
}

/* layout */
.photos {
  top: 0;
  left: 0;
}
.china {
  top: 0;
  left: 0;
}
.us {
  top: 0;
  left: 413px;
}

.china .flag {
  top: 130px;
  left: 100px;
  transform-origin: bottom left;
}

.us .flag {
  top: 100px;
  left: 35px;
  transform-origin: bottom right;
}

.boat {
  top: 250px;
  left: 30px;
}

.photos li {
  opacity: 0;
}

    gsap.from(".us", {duration: 1.5, x:300});
    gsap.from(".china", {duration: 1, delay:.5, x:-300});
    gsap.from(".flag", {duration: .5, stagger: .3, delay:1, scale:0, ease:Back.easeOut})
    gsap.from(".boat", {duration: .5, delay:2, scale:0, ease:Back.easeOut});
    gsap.to(".flag", {duration: .5, stagger: .3, delay:3, scale:.4, ease:Back.easeOut});
    gsap.to(".map", {duration: 2, delay:4, opacity:.5});
   gsap.to(".photos li", {duration: 1, stagger:2, delay: 4, opacity:1});
   gsap.to(".boat", {duration: 8, delay:3, x:400});
    gsap.to(".boat", {duration: 1, delay:3, y:-100, repeat:1, yoyo:true, repeatDelay:3});