Stay In Touch

index.html

<div class="container">
<svg  xmlns="http://www.w3.org/2000/svg" width="600px" height="600px" viewBox="0 0 600 600">
<defs>
  <mask id="ringMask">
  <rect width="1200" height="600" fill="#FFF" /> 
	<path class="smallHand" stroke="none" fill="#000" stroke-width="8" stroke-linejoin="round" stroke-miterlimit="10" d="
		M339,458c0,0-24,0-28.5,0c-8.6,0-14.4-4.8-20.1-13c-9.2-13.1-32-49.7-32-49.7s-11.8-16.2,0-23.8c9.2-5.9,14.8-3.6,20,5
		c3.5,5.8,8.5,12.3,8.5,12.3s0-50.2,0-54.8c0-4.5-0.9-15.9,17.5-15.9c14.6,0,14.5,13.4,14.5,15.1s0,1.4,0,6.5c3-3.6,21.8-5.8,24,5.8
		c3.7-5,20-4.3,20.7,10.1c6.7-5,13.3,0,13.3,6.5c0,6.5,0,39.3,0,44c0,4.7,0.5,16.8-5.2,32.3C367.9,446.9,359.3,458,339,458"/>    
    
  </mask>  
  
  <mask id="messageMask">
    
			<path class="messageOutline" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="			M364.9,307.6H240.5v-77.7h124.4V307.6z"/>    
  </mask>
<mask id="circleMask">
  <rect width="600" height="600" fill="#FFFFFF"/>
		<circle id="hideRing" fill="#000" stroke="#000" stroke-width="8" stroke-linejoin="round" stroke-miterlimit="10" cx="303" cy="300" r="0"/>
  <circle id="showRing" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="8" stroke-linejoin="round" stroke-miterlimit="10" cx="303" cy="300" r="0"/>  
  </mask>
</defs>
  <g id="emailLinesGroup" stroke-linecap="round" stroke-linejoin="round"stroke-width="6"  >
    <line x1="260" x2="260" y1="10" y2="150" />
    <line x1="310" x2="310" y1="90" y2="180" />
    <line x1="360" x2="360" y1="70" y2="120" />
  </g>
<g id="messageGroup" mask="url(#ringMask)">
	<g id="emailGroup" mask="url(#circleMask)">
			<path class="messageOutline" id="messageOutline" fill="none" stroke="#FFFFFF" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="			M364.9,307.6H240.5v-77.7h124.4V307.6z"/>
		<g id="maskedMessageFlap" mask="url(#messageMask)">
			<path id="messageFlap" fill="none" stroke="#FFFFFF" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="			M242.1,234.1l61.4,61.4l59.8-61.4"/>
    </g>
	</g>
	<g id="planeGroup" >
	<path id="planeBot" fill="none" d="M269,252.4v42.7l33.4-25.6"/>
	<path id="planeBody" fill="none" d="M329.6,287.4L287.2,257l-57.1-15.5L354.8,212L329.6,287.4z M354.8,212l-67.6,44.7"/>
</g>
</g>
<g id="handGroup" >
	<path id="bigHand" fill="none" stroke="none" stroke-width="8" stroke-linejoin="round" stroke-miterlimit="10" d="M339,458
		c0,0-24,0-28.5,0c-8.6,0-14.4-4.8-20.1-13c-9.2-13.1-32-52.6-32-52.6s-11.8-16.2,0-23.8c9.2-5.9,14.8-3.6,20,5
		c3.5,5.8,8.5,15.1,8.5,15.1s0-79.1,0-83.6c0-4.5-0.9-15.9,17.5-15.9c14.6,0,14.5,13.4,14.5,15.1c0,1.7,0,30.3,0,35.3
		c3-3.6,21.8-5.8,24,5.8c3.7-5,20-4.3,20.7,10.1c6.7-5,13.3,0,13.3,6.5c0,6.5,0,39.3,0,44c0,4.7,0.5,16.8-5.2,32.3
		C367.9,446.9,359.3,458,339,458"/>
	<path class="smallHand" fill="none" stroke="#FFFFFF" stroke-width="8" stroke-linejoin="round" stroke-miterlimit="10" d="
		M339,458c0,0-24,0-28.5,0c-8.6,0-14.4-4.8-20.1-13c-9.2-13.1-32-49.7-32-49.7s-11.8-16.2,0-23.8c9.2-5.9,14.8-3.6,20,5
		c3.5,5.8,8.5,12.3,8.5,12.3s0-50.2,0-54.8c0-4.5-0.9-15.9,17.5-15.9c14.6,0,14.5,13.4,14.5,15.1s0,1.4,0,6.5c3-3.6,21.8-5.8,24,5.8
		c3.7-5,20-4.3,20.7,10.1c6.7-5,13.3,0,13.3,6.5c0,6.5,0,39.3,0,44c0,4.7,0.5,16.8-5.2,32.3C367.9,446.9,359.3,458,339,458"/>
</g>

<g mask="url(#ringMask)">  
  <g id="ringGroup" fill="none" stroke="#FFFFFF" stroke-width="8" stroke-linejoin="round" stroke-miterlimit="10">
	
		<circle class="ring"  cx="303" cy="300" r="0"/>
	
		<circle class="ring" cx="303" cy="300" r="0"/>
	
		<circle class="ring" cx="303" cy="300" r="0"/>
</g>
</g>  
<g id="speedCurlGroup" opacity="1" stroke-width="3" fill="none" >
  <path class="speedCurl"  stroke-miterlimit="10" d="M422,203.3c0,0,39.7-6.5,56-26"/>  
	<path class="speedCurl"stroke-miterlimit="10" d="M395,239.5		c10.8,0.2,32.8-8.8,35.2-15.7c1.1-3,1.6-8.4-1.7-11.5c-3.8-3.7-11.3-2.8-14.9,1.3c-3.5,4-3.2,11,0,14.4c6.9,7.4,30.5-7.4,37.2-11.5
		c11.5-7.1,29.1-20.4,45-45.2"/>


</g>

</svg>

  
  
</div>

script.js

var xmlns = "http://www.w3.org/2000/svg",
  select = function(s) {
    return document.querySelector(s);
  },
  selectAll = function(s) {
    return document.querySelectorAll(s);
  },
  container = select('.container'),
 dottedPath = select('#dottedPath');

/*var dottedPathData = MorphSVGPlugin.pathDataToBezier(dottedPath.getAttribute('d'), {offsetX:-240, offsetY:-264-38});*/
//center the container cos it's pretty an' that
TweenMax.set(container, {
  position: 'absolute',
  top: '50%',
  left: '50%',
  xPercent: -50,
  yPercent: -50
})
TweenMax.set('svg', {
  visibility:'visible'
})

TweenMax.set(['.smallHand','#bigHand'], {
  drawSVG:'100% 100%'
})

TweenMax.set(['.speedCurl','#emailLinesGroup line'], {
  drawSVG:'0%'
})

var tl = new TimelineMax({repeat:-1});
tl
.from('.messageOutline', 1, {
  y:-400,
  transformOrigin:'50% 50%',
  ease:Elastic.easeOut.config(0.5, 0.8)
})
.from('#messageFlap', 1.1, {
  y:-500,
  ease:Elastic.easeOut.config(0.5, 0.93)
},'-=1')
.to('#emailLinesGroup line', 0.15, {
  drawSVG:'0% 50%',
  y:'+=30',
  ease:Linear.easeNone
},'-=0.9')  
 .to('#emailLinesGroup line', 0.15, {
  drawSVG:'100% 100%',
  ease:Linear.easeNone
},'-=0.75')   
  .from('.smallHand', 1.2, {
  y:30,
  ease:Anticipate.easeIn
  
})  

  
  .from('.smallHand', 0.6, {
  alpha:0
},'-=1.2')
.to('.smallHand', 1.6, {

  drawSVG:'0% 120%',
  ease:Power1.easeInOut
},'-=1.6')
.to('.smallHand', 1, {
  morphSVG:{shape:'#bigHand'},
  ease:Anticipate.easeInOut
},'-=0.6')
.to('#emailGroup', 0.2, {
  scale:0.9,
  repeat:1,
  yoyo:true,
  ease:Power1.easeInOut,
  transformOrigin:'50% 50%'
},'-=0.3')
.staggerTo('.ring', 2, {
  cycle:{
    attr:[{r:160}, {r:140},{r:120}]
  }   
},0.125,'-=0.1')
.staggerTo(['#hideRing', '#showRing'], 2, {
 cycle:{
    attr:[{r:160}, {r:140}]
  }
},0.5,'-=2.29')
.staggerTo('.ring', 1, {
    alpha:0
},0.125,'-=1.9')
.to('#messageFlap',1,{
  morphSVG:{shape:'#planeBot'},
	ease:Anticipate.easeInOut
},'-=1' )
.to('#messageOutline',1,{
  morphSVG:{shape:'#planeBody'},
	ease:Power3.easeInOut
},'-=1' )
	.to('#emailGroup', 2, {
			x:340,
			y:-190,
      scale:0,
  transformOrigin:'100% 50%',
			ease:Anticipate.easeOut
},'-=0')	

.staggerTo('.speedCurl', 0.3, {
  drawSVG:'0% 60%',
  ease:Linear.easeNone
}, 0.1,'-=1')
.staggerTo('.speedCurl', 0.3, {
  drawSVG:'100% 100%',
  ease:Linear.easeNone
},0.1,'-=0.7')
.staggerTo('.speedCurl', 0.6, {
  x:170,
  y:-60
},0,'-=1.1')

.to('.smallHand',1.2 ,{
  y:130,
  drawSVG:'53.5% 53.5%',
  ease:Power1.easeIn
},'-=3.4')

tl.timeScale(1.2)

//ScrubGSAPTimeline(tl)

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
<script src="//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js"></script>
<script src="//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.js?r=12"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/35984/AnticipateEase.min.js"></script>

stay-in-touch.markdown

Stay In Touch

Client animation (internal).

A Pen by Chris Gannon on CodePen.

License.

style.css

body {
  background-color:#29CE84;
  overflow: hidden;
}

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
.container{
  position:absolute;
  max-width:100%;
  height:600px;
}

svg{
  max-width:100%;
  visibility:hidden;
  overflow: visible;
}

.messageOutline, #messageFlap, .smallHand, #ringGroup, #speedCurlGroup, #emailLinesGroup{
  stroke:#fdfdfd;
}