Location Loader

index.html

<svg class="locationSVG" viewBox="200 175 400 300" xmlns="http://www.w3.org/2000/svg">
 <defs>
  <clipPath id="boxMask">
   <rect x="290" y="190" class="boxMask" width="220" height="220"/>
   </clipPath>
  </defs>
 <g clip-path="url(#boxMask)">
      <path class="pin" fill-rule="evenodd" clip-rule="evenodd" d="M400,289c-11,0-20,9-20,20c0,15.4,17.6,42,18.3,43.1c0.4,0.6,1,0.9,1.7,0.9c0.7,0,1.3-0.3,1.7-0.9
  c0.7-1.1,18.3-27.7,18.3-43.1C420,298,411,289,400,289z M400,301c-4.4,0-8,3.6-8,8s3.6,8,8,8c4.4,0,8-3.6,8-8S404.4,301,400,301z" fill="#FF5722"/>
      <g class="track">
        <line x1="220.5" y1="354.5" x2="820.5" y2="354.5" fill="none" stroke="#EEEEEE" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
        <circle cx="461" cy="354" r="5" fill="#EEEEEE"/>
        <circle cx="701" cy="354" r="5" fill="#EEEEEE"/>
        <circle class="boopX" cx="581" cy="354" r="5" fill="#FF5722"/>
        <circle class="boop" cx="581" cy="354" r="1" fill="none" stroke-width="8" stroke="#FF5722"/>
        <circle class="boop" cx="821" cy="354" r="5" fill="#FF5722"/>
        <circle class="boop" cx="341" cy="354" r="5" fill="#FF5722"/>
      </g>
  </g>
</svg>

location-loader.markdown

Location Loader

Something to watch while you work out where you.

Inspired by this shot

A Pen by Chris Gannon on CodePen.

License.

script.js

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);
  },
    pin = select('.pin'),
    track = select('.track')
  

TweenMax.set('svg', {
  visibility: 'visible'
})

CustomBounce.create('bobbleBounce', {strength:0.6, squash:13, endAtStart:false, squashID:'bobbleSquash'});
CustomEase.create("return", "M0,0 C0,0 0.162,1 0.4,1 0.918,1 1,0 1,0");
CustomEase.create("hup", "M0,0 C0.21,0.978 0.78,1 1,1")
TweenMax.set(pin, {
 transformOrigin:'50% 100%'
})

var tl = new TimelineMax({repeat:-1});
tl.from(pin, 1.8, {
 y:-43,
 ease:'bobbleBounce'
})
.to(pin, 1.8, {
 scaleX:1.3,
 scaleY:0.7,
 ease:'bobbleSquash'
},'-=1.8')
.to(track, 4, {
 x:'-=240',
 ease:Linear.easeNone
},'-=1.8')

.to('.boop', 1.2, {
 alpha:0,
 attr:{
  r:13
 },
 strokeWidth:0,
 ease:Sine.easeOut
},'-=1.2')
 .to(pin, 1.15, {
 transformOrigin:'50% 31%',
 //rotation:360,
 scaleX:-1,
  y:-43,
 ease:'hup'
},'-=1.15')

tl.timeScale(2.4)

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomEase.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomBounce.min.js"></script>

style.css

body {
  background-color:#FAFAFA;
  overflow: hidden;
  text-align:center;
}

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


svg{
 position:absolute;
  width:100%;
  height:100%;
  visibility:hidden;
  transform:translate(-50%, 0%);
}