How to use clip-path in an animation?

I've read a bunch of posts and been playing around with trying to animate a clip-path. At this point I can only get it show the clip-path in Firefox and it always pins the path to 0,0.

Here is an example code -> http://jsfiddle.net/justintense/4torLok9/1/

I'm using a simple inline SVG as the path:

    <clipPath id="clipping">

        <polygon fill="#FFFFFF" points="40,35 40,15 20,35   "/>
        <polygon fill="#FFFFFF" points="0,35 20,35 0,15     "/>

        <circle id="white_overlay_9_" fill="#FFFFFF" cx="20" cy="18.77" r="7.393"/>
    </clipPath>

I'm unsure if what I trying to do is even possible so am just looking for pointer so I can get this one track.

Edit:

I'm trying to recreate the behaviour similar to this site --------> http://uppymama.com/

enter image description here

Solution

Defining the `clipPath`:

You don't need three elements in your clipPath, you could simplify it to a single path element.

<path d="M0,0 L40,0 L20,15z M20,5 m-5,0 a5,5 0 1,0 10,0 a5,5 0 1,0 -10,0z" />

Applying the `clipPath` to the `div`:

For applying the clip-path, if you want maximum browser support, you could import the div into an svg element through svg's foreignObject element. Then, apply the clip-path to the foreignObject.

Here's the browser support, if you apply the clip-path through CSS.

Animating the `clipPath`:

Now, for aligning the pointer right in the middle of the menu item, you'll need JavaScript to do some calculations and animate the clipPath's transform property.

When page loads calculate the distance from the left window corner to the first menu-item and move the clip-path to that co-ordinate.
When the window resizes, calculate the distance again and move the pointer.
When the menu item is clicked, calculate the distance and animate the pointer using setTimeout() and synchronous code until it reaches the correct position.

Synchronous code means that the operations are performed one at a time and that, until one operation is over, the code execution is blocked from moving onto the next operation.

Exact replica of that site:

As you can see on that site, the pointer isn't centered.

My solution will always center the pointer depending on the width of the menu item.

Demo on CodePen

var items = document.getElementsByClassName('menu-item');
var clipPath = document.getElementById('clip-path');
var lastActive = items[0];
for (i = 0; i < items.length; i++) {
  items[i].addEventListener('click', function() {
    var x = this.getBoundingClientRect().left + (this.offsetWidth / 2) - 20;
    animStart(x);
    lastActive = this;
  })
}

function animStart(end) {
  for (start = 0; start <= end; start += 0.1) {
    anim(start);
  }
}

function anim(start) {
  setTimeout(function() {
    clipPath.setAttribute('transform', 'translate(' + start + ', 0)');
  }, 1 * start);
}

function align() {
  var x = lastActive.getBoundingClientRect().left + (lastActive.offsetWidth / 2) - 20;
  animStart(x);
}

function resize() {
  var x = lastActive.getBoundingClientRect().left + (lastActive.offsetWidth / 2) - 20;
  clipPath.setAttribute('transform', 'translate(' + x + ', 0)');
}
window.onresize = resize;
window.onload = align;

body {
  background: #222222;
  margin: 0;
}
.nav-container {
  top: 20px;
  position: relative;
  width: 100%;
  height: 50px;
  background: repeating-linear-gradient(90deg, palegoldenrod 5px, palegreen 10px, palegreen 15px, paleturquoise 15px, paleturquoise 20px, plum 20px, plum 25px);
}
.nav {
  width: 100%;
  height: 50px;
  margin: 0 auto;
  text-align: center;
}
.menu-item {
  display: inline-block;
  width: 70px;
  padding: 17px 20px;
  color: #222222;
  font-size: 14px;
}
.menu-item:hover {
  color: seagreen;
  cursor: pointer;
}
#bottom {
  width: 100%;
  height: 35px;
  background: repeating-linear-gradient(90deg, palegoldenrod 5px, palegreen 10px, palegreen 15px, paleturquoise 15px, paleturquoise 20px, plum 20px, plum 25px);
}
#clip-path {
  transition: 0.5s transform;
}

<body>
  <div class="nav-container">
    <div class="nav">
      <div id="menu-item-1" class="menu-item">Home</div>
      <div id="menu-item-2" class="menu-item">About</div>
      <div id="menu-item-3" class="menu-item">Services</div>
      <div id="menu-item-4" class="menu-item">Locations</div>
      <div id="menu-item-5" class="menu-item">Contact Us</div>
    </div>
    <svg style="position: relative; top: -1px;" class="svg-defs" height="35" width="100%">
      <defs>
        <clipPath id="clipping">
          <path id="clip-path" transform="translate(0,0)" d="M0,0 L40,0 L20,15z M20,6 m-5,0 a5,5 0 1,0 10,0 a5,5 0 1,0 -10,0z" />
        </clipPath>
      </defs>
      <foreignObject x="0" y="0" clip-path="url(#clipping)" height="35" width="100%">
        <div id="bottom"></div>
      </foreignObject>
    </svg>
  </div>
</body>

Even Better:

Retaining the last position of the pointer.