title: Skrollr, flipping image on direction change
body: <p>I have an image of an animal facing left that, when scrolling, moves left -> flips horizontally -> moves right -> flips horizontally, etc.</p>
  
  <p>The issue is when the user scroll up, the animal goes backwards. On <code>direction === 'up'</code> I'm trying to get the image to flip immediately so when the user scrolls it is facing the correct way in which is it moving.</p>
  
  <pre><code>&lt;span class="animal skrollable skrollable-between" 
      data-100="right: 2%;" data-400="right: 78%;"
      data-401="-moz-transform: scaleX(-1);
              -o-transform: scaleX(-1);
              -webkit-transform: scaleX(-1);
              -ms-transform: scaleX(-1);
              transform: scaleX(-1);
              -ms-filter: 'FlipH';
              filter: FlipH;" data-700="right: 2%;" data-701="-moz-transform: scaleX(-1);
              -o-transform: scaleX(1);
              -webkit-transform: scaleX(1);
              -ms-transform: scaleX(1);
              transform: scaleX(1);
              -ms-filter: 'FlipH';
              filter: FlipH;"
      data-900="right: 78%;" data-901="-moz-transform: scaleX(-1);
              -o-transform: scaleX(-1);
              -webkit-transform: scaleX(-1);
              -ms-transform: scaleX(-1);
              transform: scaleX(-1);
              -ms-filter: 'FlipH';
              filter: FlipH;"
      data-1450="right: 2%;" style="right: 2%;"&gt;
   &lt;/span&gt;
  </code></pre>
  
  <p>Script</p>
  
  <pre><code>&lt;script&gt;
    var animal = $('.animal')[0];
  
    var s = skrollr.init({
      edgeStrategy: 'set',
      smoothScrolling: true,
      keyframe: function (element, keyframe, direction) {
        if (element !== animal) {
          return;
        }
  
        if (direction === 'up') {
          animal.style.webkitTransform = "1";
          animal.style.MozTransform = "1";
          animal.style.msTransform = "1";
          animal.style.OTransform = "1";
          animal.style.transform = "1";
          animal.style.msFilter = "flipH";
        }
      }
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>The other issue is that I've also tried using <code>@addClass:MyClass</code> so the whole thing is cleaned up, in to a class rather than in the HTML, but it's not working at all.</p>
  
  <p>I've added an example in to a fiddle with inline comments to show the issues. <a href="http://jsfiddle.net/dp5zvxwk/1/" rel="nofollow">http://jsfiddle.net/dp5zvxwk/1/</a></p>