<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
  <style>
    .st0{fill:#5AC0ED;} .st1{fill:#60CEF4;} .st2{fill:#FFFFFF;} .st3{fill:#D8CABA;} .st4{fill:#73DCF4;} .st5{fill:#EDE5DD;} .st6{fill:#F9F5F2;} .st7{fill:#878787;} .st8{fill:#99877A;} .st9{fill:#A5645D;} .st10{fill:#C9A191;} .st11{fill:#D8B298;} .st12{fill:#916256;} .st13{fill:#28201E;} .st14{fill:#997156;} .st15{fill:#5B754B;} .st16{fill:#7D8767;} .st17{fill:#423730;} .st18{fill:#775F4F;} .st19{fill:#B2A8A1;} .st20{fill:#717C5B;} .st21{fill:#777069;} .st22{fill:#7D9150;} .st23{fill:#A39995;} .st24{fill:#5B2C25;} .st25{fill:#63453B;} .st26{fill:#7A6054;} .st27{fill:#513B36;} .st28{fill:#BDD8DB;} .st29{fill:#EBFBFC;} .st30{fill:#60534A;} .st31{fill:#BAB1AA;}
  </style>
    <path id="sky1" class="st0" d="M471 237c0 119.846-97.154 217-217 217S37 356.846 37 237c0-50.17 17.025-96.362 45.613-133.116C122.317 52.84 184.323 20 254 20c69.38 0 131.157 32.56 170.88 83.235C453.774 140.095 471 186.535 471 237z"/>
    <path id="sky2" class="st1" d="M254 363l-176-1s-41-46-42-127c-2-99 71-157 71-157s-7 115 149 115S400 77 400 77s74 66 71 160c-2.68 83.963-43 130-43 130l-174-4"/>
    <path id="sky3" class="st4" d="M46 169s71 151 205 151 210-150 210-150c32 104-24.667 191.667-24.667 191.667S270 434 78 361.667C9 267 46 169 46 169z"/>
    <path id="bigcloud" class="st2" d="M421 196C460 87 254 40 246 76c-3 31 12 39 24 63 25 69-78 18-111 1-13-10-56 33-52 42 7 17 103.636 3.384 188 9 66.754 4.443 123.35 23.553 126 5z"/>
    <path id="bigcloudshadow1" class="st3" d="M246 76c-10 36 138 88 138 88s-58 22 30 28c-28.017 4.123-121.146-3.87-140-22 9-31-44-68-28-94z"/>
    <path id="bigcloudshadow2" class="st3" d="M145 140.333S106 187 221 189.666C221 190 116 200 106 182c-8-14 39-41.667 39-41.667z"/>
    <path id="smallcloudshadow1" class="st5" d="M70 306c-7-2-30-23-21-37s57-24 62-17-15 30-11 37 19 11 25 11 11-7 17-6 12 8 6 12c-2 2-17.695-3.91-34-4-19.722-.11-40.168 5.095-44 4z"/>
    <path id="smallcloud1" class="st6" d="M49 269c-1.802 11.713 32.242 43.31 63 28 0 0-11-2-12-8s25-34 11-38c-40-8-61 13-62 18zM133 296.5s-5 6.5 15 9.5c1 0 5-7-1.5-10.5s-13.5 1-13.5 1z"/>
    <path id="smallcloudshadow2" class="st5" d="M460 285c1-12-20-36-37-32s-18 44-37 42-6-38-13-37-19 31-17 35c4 10 103 4 104-8z"/>
    <path id="smallcloud2" class="st6" d="M363.5 269.5s2.5 22.5 15 22C374 288 380 258 373 258s-9.5 11.5-9.5 11.5zM413.5 260s-9.5 18-3.5 26c8 10 46.5 2.5 46.5 2.5S471 278 446 260s-32.5 0-32.5 0z"/>
   <path class="st15" d="M24 362h458s-82 91-227 91-231-91-231-91z" id="groundplane"/>
  <g id="Layer_6">
    <path id="water" class="st28" d="M69 363h198s-43 7-75 9c-22 6 137 3 138 8s-65 2-60 6c19 10 143 16 142 20-40.454 7.395-167 19-207 8-9-4 3.965-6.897-1-11S43 386 43 386s-6-5 65-10c29-3 18-3-14-5-15 0-52 0-54-2s29-6 29-6z"/>
    <path id="waterreflection" class="st29" d="M118.333 375l157.333 13.333C359 403 461 401 388 409l-280-33 10.333-1zM121.333 372.333l199.667 10-41.333.667-155.167-9.25z"/>
<!--     <path class="st10" d="M352 94l-1 5 .125 5.75-.875-.5L350 95z"/> -->
      <path id="plateau" class="st22" d="M165 363s-14-21-15-37c-2-129 168-197 198-194 29 1 27 41 27 41s-25-3-26 31c-3 54 20 160 20 160l-204-1z"/>
    <path id="plateaudark" class="st25" d="M165 363s-16-26-2-56c2-11 3-35 3-35 6.622-11.515 17.062-18.18 25-27-1 8 3 70 3 70l9 22-6-21 4-1 5-22 20-36v-17l14-10s-1-14 2-19c5.9-7.084 8-21 8-21l8-7c-1.433-.172-8.508 14.698-6 28-1 14 2 17 2 17l-1 49 5 36-1-86c4.152.1 11.48-.798 11 0 12-1 26 40 39 40-3 12-2 24-2 24l10-20 3-20-12-12s4-21 0-35c6-11 14-15 14-15l5-44 4 22s21-17 29-11 14 17 14 17-16 6-20 18c-12 44 22 173 22 173l-206-1h-3z"/>
    <path id="bgplateauextradark" class="st27" d="M191 263.667L189 277l2 68-6 14v4.333l20.667.334L204 342l-10-27zM240 230l2 84-5-37-11-37zM305 291l-5.667 67-.333-72 8-19zM280 296l1 17 14 46-28 4 1-38 10-34zM253 277l5 36 1 48-26.333 2.667L246 330zM325 145l4 22s-2 61-2 60-2-24-2-24l-5-14 5-44z"/>
    <path id="house1" class="st12" d="M339 126l23 2-3 8h-21z"/>
    <path id="house2" class="st11" d="M332 137c-1-1-2-10-2-10l4-33 4 32h1l-1 10-6 1z"/>
    <path id="houseroof" class="st24" d="M338 126l26 3-8-21-22-15-6 35 2.063-.312L330 127l4-33z"/>
    <path id="chimney1" class="st9" d="M350.25 104.25L350 95l2-1 3 3-2 6-.375 2.875-2.375-1.625"/>
    <path id="chimney2" class="st8" d="M300.5 116l-4.5 23 4-13 3-3 1-4-3.5-3"/>
    <path id="chimneysmoke" class="st7" d="M352 98c.614.344 5.137-4.132 4-7-.865-2.18-3.84-1.547-5-4-.79-1.668-.16-3.542 1-7 1.196-3.564 2.105-4.098 2-6-.135-2.444-1.79-5.128-3-5-2.14.226-5.28 9.496-2 16 1.51 2.994 3.888 4.423 4 8 .09 2.9-1.384 4.785-1 5z"/>
    <path id="windows" class="st13" d="M333 114l-1 10 3-1-1-9zM345 132l-1-5 4 1-1 4h-2"/>
    <path id="treetrunks" class="st14" d="M433 307l2 15-6 25 11-10-3-15v-16zM148 272l2 15 4 11 2-8.667-5-7.333zM171 219l-3 21v18l7-13-3-8v-19zM182 222v12l3-4.667z"/>
    <path id="bgtrees" class="st16" d="M154.333 294.333L144 236l7 17 4-20 11 31-11.667 30.333M175 228l7-89 6 53 7-18 3 10 10-28 10 51-23 11.333zM298 137l9-62 3 47 2-18 5 35.667-7.333 1.333zM384 343l16-47 2 41 5-11 5 24h-31z"/>
    <path id="bigtree" class="st15" d="M412 327c15 5 48-12 48-12l-8-40-22-35-6-41-3 31 9 49-18 48z"/>
    <path id="logouter" class="st18" d="M376 340l21-5 19 5 7-20-10-24 14 23-2 20 5 1 33-21-6 20-11 5-14 12 20-11 1 9 3 2 2 7-35 3-21-4h-23z"/>
    <path id="loginner" class="st17" d="M462 321.5V352l-7-1 5 6-2 6-27-5v-11z"/>
    <path id="rockssmall" class="st19" d="M228 191v-16l8-11 6 3 4 13zM247 174l6-12 2 2 5 1z"/>
    <path id="rocktopshadow" class="st8" d="M305 110l2 5 14 6 2 7-33 21-2-45"/>
    <path id="rocktoplight" class="st19" d="M269 163l-2-20 7-7 14-32 12 9-10 34 13-29 12-1 8 11v12z"/>
    <path id="bgplateau" class="st20" d="M64 333s1-12 5-17 16-14 25-16 12-3 15 0-3 26 7 34c3 2 14-4 14-4l50 25-5.667 7.333H47.667S68 360 73 353c10-24-9-20-9-20z"/>
    <path id="bgplateaudark" class="st26" d="M64 333l20-15 4 12 4-10 6-6v12l5 3-13 21-10-3-8 7s6-13 3-17c-3.842-5.122-11-4-11-4z"/>
    <path id="bgplateautrees" class="st16" d="M104 363l4-17 6 13 9-41 7 36 6-18 8 28z"/>
    <path id="bgrocklight" class="st23" d="M147 344l6 4 2 6-11 4-8-2z"/>
    <path id="bgrockmid" class="st8" d="M141 362.5l-5-6.5 11-12 15 2 8 15-29 1.5"/>
    <path id="bgrockshadow" class="st21" d="M144 358l11-4 9 2 1 7-17.333-1z"/>  
    <path id="toptreetrunk" class="st14" d="M379 119l-5 15-8 10 3 8 7-15 3-14z"/>
    <path id="lefttree"class="st15" d="M140 280l17-10-6-17-11-57z"/>
    <path id="trees" class="st15" d="M370 117c12 4 14 34 14 34l16-98s-21 59-30 64zM162 236l19-26-7-16-2-76-6 59z"/>
    <path id="fgtrees" class="st16" d="M164 363l10-59 4 59zM242 363l10-46 4 16 13-79 7 107 18-63 11 65z"/>
    <path id="fgrock2light" class="st21" d="M237 359l3 11 11 2 47-13 16-30-6-16-10 5h-5l-53 38z"/>
    <path id="fgrocksextradark" class="st30" d="M349 301l-18 41 23-31 9-2zM251 372l10-12 21-6-11-1 32-21-.5 17 2.5 14z"/>
    <path id="fgrocksshadow2" class="st30" d="M271 353l-10 2-8-2 8 7 21-6z"/>
    <path id="fgrock1light" class="st31" d="M292 345l31-110 18-10 8 76-18 41 23-31 28 19 2 35-72 3-14-3z"/>
    <path id="fgrock1shadow" class="st8" d="M341 225l20 48 18 35 16 16-8 38-3 3-30-54 9-2-14-8z"/>
    <path id="fgrock1shadow2" class="st8" d="M292 345l20 23-14-3z"/>
</svg>
svg {
  max-height: 800px;
}
//defined animation timeline options
var tmax_opts = {
  delay: 0.3,
  //repeats infinitely
  repeat: -1,
  //between repeats, wait 0.5s
  repeatDelay: 0.5,
  //causes animation to alternate forwards and backwards
  yoyo: true
};
var tmax_t1 = new TimelineMax(tmax_opts),
    shapes = $('path'),
    stagger = 0.05,
    duration = 2;
var staggerFrom = {
  scale: 0,
  opacity: 0,
  transformOrigin: 'center center',
};
var staggerTo = {
  opacity: 1,
  scale: 1,
  ease: Elastic.easeInOut
};
//GSAP animation expression
tmax_t1.staggerFromTo(shapes, duration, staggerFrom, staggerTo, stagger, 0);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js