JSFiddle - React, Tailwind, and code Playground

by Tahir Ahmed

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
<div class="wrapper">
<svg version="1.1" id="cloudDrizzle" class="climacon climacon_cloudDrizzle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="15 15 70 70" enable-background="new 15 15 70 70" xml:space="preserve">
    <g class="climacon_iconWrap climacon_iconWrap-cloudDrizzle">
        <g class="climacon_componentWrap climacon_componentWrap-drizzle">
            <path class="climacon_component climacon_component-stroke climacon_component-stroke_drizzle climacon_component-stroke_drizzle-left" d="M42.001,53.644c1.104,0,2,0.896,2,2v3.998c0,1.105-0.896,2-2,2c-1.105,0-2.001-0.895-2.001-2v-3.998C40,54.538,40.896,53.644,42.001,53.644z"></path>
            <path class="climacon_component climacon_component-stroke climacon_component-stroke_drizzle climacon_component-stroke_drizzle-middle" d="M49.999,53.644c1.104,0,2,0.896,2,2v4c0,1.104-0.896,2-2,2s-1.998-0.896-1.998-2v-4C48.001,54.54,48.896,53.644,49.999,53.644z"></path>
            <path class="climacon_component climacon_component-stroke climacon_component-stroke_drizzle climacon_component-stroke_drizzle-right" d="M57.999,53.644c1.104,0,2,0.896,2,2v3.998c0,1.105-0.896,2-2,2c-1.105,0-2-0.895-2-2v-3.998C55.999,54.538,56.894,53.644,57.999,53.644z"></path>
        </g>
        <g class="climacon_componentWrap climacon_componentWrap-cloud">
            <path class="climacon_component climacon_component-stroke climacon_component-stroke_cloud" d="M63.999,64.944v-4.381c2.387-1.386,3.998-3.961,3.998-6.92c0-4.418-3.58-8-7.998-8c-1.603,0-3.084,0.481-4.334,1.291c-1.232-5.316-5.973-9.29-11.664-9.29c-6.628,0-11.999,5.372-11.999,12c0,3.549,1.55,6.729,3.998,8.926v4.914c-4.776-2.769-7.998-7.922-7.998-13.84c0-8.836,7.162-15.999,15.999-15.999c6.004,0,11.229,3.312,13.965,8.203c0.664-0.113,1.336-0.205,2.033-0.205c6.627,0,11.998,5.373,11.998,12C71.997,58.864,68.655,63.296,63.999,64.944z"></path>
     ...

CSS

.wrapper {
    width: 60%;
    margin: 0 auto;
    text-align: center;
}
svg {
    float: left;
    display: inline-block;
    width: 100px;
    height: 100px;
    shape-rendering: geometricPrecision;
}
g, path, circle, rect {
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear;
    -o-animation-timing-function: linear;
    -o-animation-direction: normal;
    animation-direction: normal;
    -webkit-animation-direction: normal;
    -moz-animation-direction: normal;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -moz-animation-duration: 12s;
    -webkit-animation-duration: 12s;
    -o-animation-duration: 12s;
    animation-duration: 12s;
}

/* CLOUD MOON */
svg#cloudDrizzle .climacon_componentWrap-moon_cloud {
  -webkit-animation-name: behindCloudMove, wobble;
  -moz-animation-name: behindCloudMove, wobble;
  -o-animation-name: behindCloudMove, wobble;
  animation-name: behindCloudMove, wobble;

  -webkit-animation-iteration-count: 1, infinite;
  -moz-animation-iteration-count: 1, infinite;
  -o-animation-iteration-count: 1, infinite;
  animation-iteration-count: 1, infinite;

  -webkit-animation-timing-function: ease-out, linear;
  -moz-animation-timing-function: ease-out, linear;
  -o-animation-timing-function: ease-out, linear;
  animation-timing-function: ease-out, linear;

  -webkit-animation-delay: 0, 3s;
  -moz-animation-delay: 0, 3s;
  -o-animation-delay: 0, 3s;
  animation-delay: 0, 3s;

  -webkit-animation-duration: 3s, 12s;
  -moz-animation-duration: 3s, 12s;
  -o-animation-duration: 3s, 12s;
  animation-duration: 3s, 12s;
}

/* DRIZZLE */
svg#cloudDrizzle .climacon_component-stroke_drizzle {
 ...

JavaScript

var cloudDrizzle = document.querySelectorAll('#cloudDrizzle2 .climacon_component-stroke_drizzle');
var duration = 1;
var firstTimeline = createTimeline(cloudDrizzle[0], duration, 0);
var secondTimeline = createTimeline(cloudDrizzle[1], duration, duration * 0.6);
var secondTimeline = createTimeline(cloudDrizzle[2], duration, duration * 1.2);

function createTimeline(target, duration, delay) {
	var timeline = new TimelineMax({ repeat: -1, delay: delay });
  timeline.fromTo(target, duration, {
    opacity: 0
  }, {
  	bezier: { values: [{ opacity: 1 }, { opacity: 0 }]},
    ease: Power1.easeIn
  }, 0);
  timeline.to(target, duration, {
    y: 21,
    ease: Power1.easeIn
  }, 0);
  return timeline;
}