<svg class="lottieSVG" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
<defs>
 </defs>
      <path class="L" d="M420.27,364.27c-15.21-.39-29.63-10.44-54.77-3.77-14.2,3.77-44.25,6.51-80-27-35.15-32.94-44.5-11-44.5.5s15.41,21.37,29.5,11.5C290.5,331.5,293,237,293,237" fill="none" stroke="#16838f" stroke-linecap="round" stroke-miterlimit="10" stroke-width="11"/>
      <path class="L" d="M420.27,364.27c-15.21-.39-29.63-10.44-54.77-3.77-14.2,3.77-44.25,6.51-80-27-35.15-32.94-44.5-11-44.5.5s15.41,21.37,29.5,11.5C290.5,331.5,293,237,293,237" fill="none" stroke="#FFF" stroke-linecap="round" stroke-miterlimit="10" stroke-width="11"/>
 
      <circle class="O" cx="339.5" cy="304.5" r="26" fill="none" stroke="#FFF" stroke-linecap="round" stroke-miterlimit="10" stroke-width="10.5"/>
      <circle class="O" cx="339.5" cy="304.5" r="26" fill="none" stroke="#16838f" stroke-linecap="round" stroke-miterlimit="10" stroke-width="11"/>
 
      <line class="T1Bot" x1="396.34" y1="271.41" x2="392.5" y2="335.5" fill="none" stroke="#16838f" stroke-linecap="round" stroke-miterlimit="10" stroke-width="10.5"/>
      <line class="T1Bot" x1="396.34" y1="271.41" x2="392.5" y2="335.5" fill="none" stroke="#FFF" stroke-linecap="round" stroke-miterlimit="10" stroke-width="11"/>
 
      <path class="T1Top" d="M335.5,335.5s2-27-6-38c-4.48-6.16-17-30,6-43s64,28,95,26" fill="none" stroke="#FFF" stroke-linecap="round" stroke-miterlimit="10" stroke-width="10.5"/>
      <path class="T1Top" d="M335.5,335.5s2-27-6-38c-4.48-6.16-17-30,6-43s64,28,95,26" fill="none" stroke="#16838f" stroke-linecap="round" stroke-miterlimit="10" stroke-width="10.5"/>
      <path class="T1Top" d="M335.5,335.5s2-27-6-38c-4.48-6.16-17-30,6-43s64,28,95,26" fill="none" stroke="#FFF" stroke-linecap="round" stroke-miterlimit="10" stroke-width="11"/>
 
      <line class="T2Bot" x1="433.91" y1="317.07" x2="437.36" y2="242.5" fill="none" stroke="#FFF" stroke-miterlimit="10" stroke-width="10.5"/>
      <line class="T2Bot" x1="433.91" y1="317.07" x2="437.36" y2="242.5" fill="none" stroke="#16838f" stroke-miterlimit="10" stroke-width="11"/>
 
      <polyline class="T2Top" points="396.5 242.5 438.36 242.5 474.5 242.5" fill="none" stroke="#FFF" stroke-linecap="round" stroke-miterlimit="10" stroke-width="10.2"/>
      <polyline class="T2Top" points="396.5 242.5 438.36 242.5 474.5 242.5" fill="none" stroke="#16838f" stroke-linecap="round" stroke-miterlimit="10" stroke-width="11"/>
 
      <line class="ESpine" x1="467.73" y1="299" x2="465.02" y2="348.01" fill="none" stroke="#16838f" stroke-miterlimit="10" stroke-width="11"/>
      <line class="ESpine" x1="467.73" y1="299" x2="465.02" y2="348.01" fill="none" stroke="#FFF" stroke-miterlimit="10" stroke-width="11"/>
 
 
      <line class="ETop" x1="498.76" y1="242.5" x2="532" y2="242.5" fill="none" stroke="#16838f" stroke-linecap="round" stroke-miterlimit="10" stroke-width="11"/>
      <line class="ETop" x1="498.76" y1="242.5" x2="532" y2="242.5" fill="none" stroke="#FFF" stroke-linecap="round" stroke-miterlimit="10" stroke-width="11"/>
 
 
      <line class="EMid" x1="466.76" y1="271.41" x2="531.54" y2="271.41" fill="none" stroke="#16838f" stroke-linecap="round" stroke-miterlimit="10" stroke-width="11"/>
      <line class="EMid" x1="466.76" y1="271.41" x2="531.54" y2="271.41" fill="none" stroke="#FFF" stroke-linecap="round" stroke-miterlimit="10" stroke-width="11"/>
 
      <line class="EBot" x1="496.21" y1="299" x2="532" y2="299" fill="none" stroke="#FFF" stroke-linecap="round" stroke-miterlimit="10" stroke-width="10.5"/>
      <line class="EBot" x1="496.21" y1="299" x2="532" y2="299" fill="none" stroke="#16838f" stroke-linecap="round" stroke-miterlimit="10" stroke-width="11"/>
 
 
      <circle class="endBall" cx="556.23" cy="298.59" r="5.5" fill="#fff" opacity="0"/>
      <circle class="startBall" cx="420.27" cy="364.27" r="5.5" fill="#fff"/> 
 
      <g class="speedLines1">
        <path d="M292.54,219.61s11.94-58.28,15.19-69.64" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="2"/>
        <path d="M297.55,215.32s11.87-59.09,16-70.1" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="2"/> 
 </g> 
 
      <g class="speedLines2" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="2">
        <line x1="347.6" y1="348.63" x2="390.4" y2="330.5"/>
        <line x1="347.9" y1="351.72" x2="390.4" y2="344.85"/>
        <line x1="325.33" y1="344.95" x2="287.44" y2="319.89"/>
        <line x1="324.13" y1="347.72" x2="281.42" y2="333.84"/>
      </g>
 
      <g class="speedLines3"  fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="2">
        <path d="M315.1,260.46S326.33,241,344.69,241c24.46-.1,70.77,30.47,81.07,29.35"/>
        <path d="M356.24,265.27S382,277.09,384.19,279.5c0,4.1-2.17,41.39-2.17,41.39"/>
      </g> 
 
      <g class="speedLines4"  fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="2">
        <line x1="429.18" y1="231.39" x2="421.27" y2="221.77"/>
        <line x1="436.7" y1="229.12" x2="438.58" y2="216.22"/>
        <line x1="444.46" y1="232.23" x2="454.57" y2="221.65"/>
      </g> 
 
      <g class="speedLines5"  fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="2">
        <line x1="399.24" y1="338.34" x2="407.15" y2="347.97"/>
        <line x1="391.72" y1="340.61" x2="389.83" y2="353.51"/>
        <line x1="383.96" y1="337.5" x2="373.85" y2="348.09"/>
      </g> 
 
      <g class="speedLines6"  fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="2">
        <line x1="489.04" y1="232.23" x2="527.78" y2="232.23"/>
        <line x1="455.72" y1="261.39" x2="510.82" y2="261.39"/>
        <line x1="483.27" y1="289.54" x2="515.38" y2="289.54"/>
      </g> 
      <g class="speedLines7"  fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="2">
        <line x1="539.5" y1="288.98" x2="563.45" y2="261"/>
        <line x1="543.25" y1="292.59" x2="576.69" y2="280.08"/>
        <line x1="543.25" y1="299.08" x2="577.89" y2="308.23"/>
      </g> 
</svg>
body {
  background-color:#16c9bd;
  overflow: hidden;
  text-align:center;
}

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;padding: 0;
}


svg{
  width:100%;
  height:100%;
  visibility:hidden;

}

TweenLite.defaultOverwrite = "none";
var xmlns = "http://www.w3.org/2000/svg",
 xlinkns = "http://www.w3.org/1999/xlink",
 select = function(s) {
  return document.querySelector(s);
 },
 selectAll = function(s) {
  return document.querySelectorAll(s);
 },
 L = selectAll('.L'),
 O = selectAll('.O'),
 T1Top = selectAll('.T1Top'),
 T1Bot = selectAll('.T1Bot'),
 T2Top = selectAll('.T2Top'),
 T2Bot = selectAll('.T2Bot'),
 ESpine = selectAll('.ESpine'),
 EMid = selectAll('.EMid'),
 ETop = selectAll('.ETop'),
 EBot = selectAll('.EBot'),
 endBall = select('.endBall'),
 startBall = select('.startBall'),
 allLines1 = selectAll('.speedLines1 *'),
 allLines2 = selectAll('.speedLines2 *'),
 allLines3 = selectAll('.speedLines3 *'),
 allLines4 = selectAll('.speedLines4 *'),
 allLines5 = selectAll('.speedLines5 *'),
 allLines6 = selectAll('.speedLines6 *'),
 allLines7 = selectAll('.speedLines7 *')

CustomEase.create("ballUp", "M0,0 C0.016,1.256 0.662,1.276 1,1.3")
CustomEase.create("ballDown", "M0,0 C0.29,0.044 0.936,0.516 1,1.3")
TweenMax.set('svg', {
 visibility: 'visible'
})

TweenMax.set([allLines1, allLines2, allLines3, allLines4, allLines5, allLines6, allLines7], {
 drawSVG: '0% 0%',
 immediateRender: true
})

TweenMax.staggerTo(L, 0, {
 cycle: {
  drawSVG: ['0% 0%', '50% 50%']
 },
 autoAlpha: 0
}, 0)
TweenMax.staggerTo(O, 0, {
 cycle: {
  drawSVG: ['0% 100%', '0% 50%']
 },
 rotation: 36,
 transformOrigin: '50% 50%'
}, 0)
TweenMax.set([T1Top, T1Bot], {
 drawSVG: '0% 0%',
 autoAlpha: 1
})
TweenMax.set([ETop, EMid, EBot], {
 drawSVG: '0% 0%',
 x: '-=10'
})
TweenMax.set([T2Bot, T2Top], {
 drawSVG: '50% 50%',
 autoAlpha: 1
})

TweenMax.set(ESpine, {
 drawSVG: '0% 0%',
 y: -10
})

var mainTl = new TimelineMax({repeat:-1});

var linesTl = new TimelineMax();

var tl = new TimelineMax();
tl.set([L, T1Top, T2Top], {
  autoAlpha: 0
 })
 .from(startBall, 0.5, {
  attr: {
   cx: 820
  },
  ease: Linear.easeNone
 })
 .set(startBall, {
  attr: {
   cx: 293,
   cy: 236
  },
  autoAlpha: 0
 })
 .set(L[0], {
  autoAlpha: 1
 })

.staggerTo(L, 0.3, {
  cycle: {
   drawSVG: ['15% 67%', '67% 100%']
  },
  ease: Linear.easeNone
 }, 0.3)
 .set(L[1], {
  autoAlpha: 1
 }, '-=0.3')

.set(startBall, {
  autoAlpha: 1
 }, '-=0.03')
 .to(startBall, 0.4, {
  attr: {
   cy: 160
  },
  ease: 'ballUp'
 }, '-=0.03')
 .to(startBall, 0.6, {
  attr: {
   cx: 313
  },
  ease: "ballUp"
 }, '-=0.4')
 //drop
 .to(startBall, 0.6, {
  attr: {
   cy: 352
  },
  ease: Power2.easeIn
 }, '-=0.2')

.to(startBall, 0.6, {
  attr: {
   cx: 336
  },
  ease: Power1.easeIn
 }, '-=0.6')
 .set(startBall, {
  autoAlpha: 0
 })
 //O

.from(O, 1.4, {
  attr: {
   cy: '+=50',
   r: 6
  },
  strokeWidth: 0,
  ease: Elastic.easeOut.config(1.2, 0.8)
 }, '-=0.03')
 /* .staggerFrom(O, 1, {
  cycle:{
   //drawSVG:['0% 100%', '0% 50%']
  }
 },0.2,'-=1') */
 .set(T1Top[0], {
  autoAlpha: 1
 }, '-=1.4')

//T1
.staggerTo(T1Top, 1, {
  cycle: {
   drawSVG: ['20% 100%', '20% 100%', '20% 90%']
  },
  onStart: makeVisible,
  onStartParams: ["{self}"]
 }, 0.4, '-=1.4')
 .set(T1Top[1], {
  autoAlpha: 1
 }, '-=1.4')
 .set(T1Top[2], {
  autoAlpha: 1
 }, '-=1.4')

.staggerTo(T1Bot, 1, {
  cycle: {
   drawSVG: ['0% 100%', '0% 100%']
  },
  onStart: makeVisible,
  onStartParams: ["{self}"]
 }, 0.2, '-=0.7')
 .staggerTo(T2Bot, 1, {
  cycle: {
   drawSVG: ['0% 100%', '0% 100%']
  },
  onStart: makeVisible,
  onStartParams: ["{self}"]
 }, 0.2, '-=0.8')
 .set(T2Top[0], {
  autoAlpha: 1
 }, '-=0.8')

.staggerTo(T2Top, 1, {
  cycle: {
   drawSVG: ['0% 100%', '0% 100%']
  },
  onStart: makeVisible,
  onStartParams: ["{self}"]
 }, 0.2, '-=0.8')
 .set(T2Top[1], {
  autoAlpha: 1
 }, '-=1')

.staggerTo(ESpine, 1.3, {
 cycle: {
  drawSVG: ['0% 100%', '0% 100%']
 },
 y: 0,
 onStart: makeVisible,
 onStartParams: ["{self}"],
 ease: Elastic.easeOut.config(0.85, 0.7)
}, 0.05, '-=0.8')

.staggerTo(ETop, 1, {
  cycle: {
   drawSVG: ['0% 100%', '0% 60%']
  },
  x: 0,
  ease: Elastic.easeOut.config(0.7, 0.7)
 }, 0.2, '-=1.4')
 .staggerTo(EMid, 1, {
  cycle: {
   drawSVG: ['0% 100%', '0% 60%']
  },
  x: 0,
  ease: Elastic.easeOut.config(0.7, 0.7)
 }, 0.2, '-=1.4')

.staggerTo(EBot, 1, {

  drawSVG: '0% 100%',
  x: 0,
  ease: Elastic.easeOut.config(0.7, 0.7)
 }, 0.4, '-=1.3')
 .set(startBall, {
  autoAlpha: 1,
  fill: '#16838f'
 }, '-=0.8')
 .fromTo(startBall, 0.8, {
  attr: {
   cx: 533 //,
    // cy:290
  }
 }, {
  attr: {
   cx: 560 //,
    // cy:299
  },
  immediateRender: false,
  ease: Sine.easeOut
 }, '-=0.8')
 .fromTo(startBall, 0.8, {
  attr: {
   //cx:531,
   cy: 294
  }
 }, {
  attr: {
   //cx:560,
   cy: 299
  },
  immediateRender: false,
  ease: Bounce.easeOut
 }, '-=0.8')

linesTl
 .to(allLines1, 0.2, {
  drawSVG: '20% 100%',
  ease: Linear.easeNone
 })
 .to(allLines1, 0.1, {
  drawSVG: '100% 100%',
  ease: Linear.easeNone
 })
 .to(allLines2, 0.2, {
  drawSVG: '20% 50%',
  ease: Linear.easeNone
 }, '+=0.5')
 .to(allLines2, 0.2, {
  drawSVG: '100% 100%',
  ease: Linear.easeNone
 })
 .staggerTo(allLines3, 0.4, {
  drawSVG: '20% 60%',
  ease: Linear.easeNone
 }, 0.3, '+=0')
 .staggerTo(allLines3, 0.4, {
  drawSVG: '100% 100%',
  ease: Linear.easeNone
 }, 0.3, '-=0.4')

.staggerTo(allLines5, 0.1, {
  drawSVG: '0% 60%',
  ease: Linear.easeNone
 }, 0, '-=0.1')
 .staggerTo(allLines5, 0.2, {
  drawSVG: '100% 100%',
  ease: Linear.easeNone
 }, 0, '-=0')

.staggerTo(allLines4, 0.1, {
  drawSVG: '0% 60%',
  ease: Linear.easeNone
 }, 0, '-=0.05')
 .staggerTo(allLines4, 0.2, {
  drawSVG: '100% 100%',
  ease: Linear.easeNone
 }, 0, '-=0')

.staggerTo(allLines6, 0.4, {
  drawSVG: '20% 60%',
  ease: Linear.easeNone
 }, 0.2, '+=0')
 .staggerTo(allLines6, 0.3, {
  drawSVG: '100% 100%',
  ease: Linear.easeNone
 }, 0.2, '-=0.4')

.staggerTo(allLines7, 0.3, {
  drawSVG: '50% 80%',
  ease: Linear.easeNone
 }, 0, '-=0.5')
 .staggerTo(allLines7, 0.3, {
  drawSVG: '100% 100%',
  ease: Linear.easeNone
 }, 0, '-=0.2')
 .to('svg', 2, {
alpha:0,
 ease:Sine.easeIn
 },'+=2')

function makeVisible(e) {
 TweenMax.set(this, {
  autoAlpha: 1
 })
}

mainTl.add(tl, 0);
mainTl.add(linesTl, 0.9);
tl.timeScale(1.2);
TweenMax.globalTimeScale(1.26);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomEase.min.js
  3. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.js?r=12