<svg hidden xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol id="plane" viewBox="0 0 330.546 330.546">
    <svg fill-rule="evenodd" xmlns="http://www.w3.org/2000/svg">
      <path d="M323.043 186.573H210.107c.06-1.215.101-2.438.101-3.672 0-8.579-1.491-16.717-4.142-24.033h45.48a7.502 7.502 0 007.502-7.502 7.502 7.502 0 00-7.502-7.502H198.18c-6.595-9.068-15.448-15.41-25.407-17.559V97.733a7.503 7.503 0 10-15.004 0v28.571c-9.958 2.148-18.811 8.49-25.405 17.559H78.995a7.502 7.502 0 00-7.502 7.502 7.502 7.502 0 007.502 7.502h45.483c-2.651 7.316-4.142 15.455-4.142 24.033 0 1.234.041 2.457.101 3.672H7.502a7.503 7.503 0 000 15.005h39.624a21.799 21.799 0 00-1.12 6.9c0 12.078 9.827 21.903 21.905 21.903 12.077 0 21.902-9.826 21.902-21.903 0-2.411-.397-4.73-1.12-6.9h34.097c6.08 22.514 22.82 38.738 42.48 38.738 19.661 0 36.402-16.224 42.483-38.738h34.098a21.799 21.799 0 00-1.12 6.9c0 12.078 9.826 21.903 21.904 21.903 12.077 0 21.902-9.826 21.902-21.903 0-2.411-.397-4.73-1.12-6.9h39.624a7.502 7.502 0 007.502-7.503 7.498 7.498 0 00-7.5-7.501zM74.808 208.478a6.905 6.905 0 01-6.897 6.898c-3.805 0-6.9-3.095-6.9-6.898 0-3.805 3.095-6.9 6.9-6.9 3.803 0 6.897 3.095 6.897 6.9zm90.463 16.833c-16.503 0-29.929-19.025-29.929-42.41 0-23.384 13.426-42.408 29.929-42.408 16.505 0 29.933 19.024 29.933 42.408 0 23.385-13.428 42.41-29.933 42.41zm104.263-16.833a6.905 6.905 0 01-6.897 6.898c-3.804 0-6.899-3.095-6.899-6.898 0-3.805 3.095-6.9 6.899-6.9 3.803 0 6.897 3.095 6.897 6.9z" />
      <path d="M178.121 158.264h-26.173a7.502 7.502 0 000 15.005h26.173a7.503 7.503 0 100-15.005z" /></svg>
  </symbol>
  <symbol id="cloud" viewBox="0 0 512 512">
    <path d="M434.931 227.069C428.207 184.032 390.897 151 346 151c-16.89 0-33.12 4.673-47.197 13.389C277.387 128.397 238.832 106 196 106c-66.167 0-120 53.833-120 120 0 .41 0 .835.015 1.245C33.49 234.408 0 271.483 0 316c0 49.629 41.371 90 91 90h330c49.629 0 91-40.371 91-90 0-44.897-34.032-82.207-77.069-88.931z" />
  </symbol>
</svg>

<svg class="plane">
  <use xlink:href="#plane"></use>
</svg>
<svg class="cloud">
  <use xlink:href="#cloud"></use>
</svg>
<svg class="cloud">
  <use xlink:href="#cloud"></use>
</svg>
<svg class="cloud">
  <use xlink:href="#cloud"></use>
</svg>
body {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #b2def2;
  position: relative;
}

.plane {
  height: 45vmin;
}

.cloud {
  fill: #fff;
  opacity: 0.5 !important;
  position: absolute;
  top: 2vmin;
  left: 30%;
  height: 15vmin;

  &:nth-child(2n) {
    top: 60%;
    left: 70%;
    height: 20vmin;
  }

  &:nth-child(3n) {
    top: 40%;
    left: 5vmin;
    height: 17vmin;
  }
}
View Compiled
gsap.set("body > *", { autoAlpha: 1 });

const tl = gsap.timeline({ delay: 0.5, repeat: -1, repeatDelay: 2 });
const plane = document.querySelector("svg.plane");

tl.set(plane, { transformOrigin: "50% 12%" });
tl.from(plane, { scale: 0.8, duration: 1.8, autoAlpha: 0, ease: "power2.out" });
tl.to(plane, {
  rotate: "40deg",
  ease: "sine.inOut",
  duration: 0.5
});
tl.to(plane, {
  translateX: "60%",
  ease: "sine.in",
  duration: 0.75
});
tl.to(plane, {
  translateX: "80%",
  rotate: "0deg",
  ease: "sine.out",
  duration: 0.75
});
tl.to(plane, {
  rotate: "-360deg",
  translateX: "-75%",
  duration: 2.5,
  ease: "sine.inOut"
});
tl.to(plane, {
  translateY: "-40%",
  ease: "sine.inOut",
  duration: 0.7
});
tl.to(plane, {
  rotate: "-290deg",
  ease: "sine.inOut",
  duration: 0.8
});
tl.to(plane, {
  translateY: "45%",
  translateX: "60%",
  duration: 2,
  ease: "sine.in"
});
tl.to(plane, {
  translateY: "60%",
  translateX: "75%",
  rotate: "-360deg",
  duration: 1.5,
  ease: "sine.out"
});
tl.to(plane, {
  translateX: "-500%",
  rotate: "-450deg",
  duration: 5,
  ease: "sine.inOut"
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/CSSRulePlugin.min.js
  3. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomBounce3.min.js
  4. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomEase3.min.js
  5. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomWiggle3.min.js
  6. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin3.min.js
  7. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/Draggable.min.js
  8. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/EaselPlugin.min.js
  9. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/EasePack.min.js
  10. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/GSDevTools3.min.js
  11. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/InertiaPlugin.min.js
  12. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin3.min.js
  13. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MotionPathHelper.min.js
  14. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/MotionPathPlugin.min.js
  15. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Physics2DPlugin3.min.js
  16. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/PhysicsPropsPlugin3.min.js
  17. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/PixiPlugin.min.js
  18. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrambleTextPlugin3.min.js
  19. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.5/ScrollToPlugin.min.js
  20. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/SplitText3.min.js
  21. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/TextPlugin.min.js