title: css/jquery/velocity.js wipe effect
body: <p>I want to mimic powerpoint's wipe effect with <strong>css / jquery / velocity.js</strong>.</p>
  
  <p>Desired effect: <a href="https://www.youtube.com/watch?v=VSBB0wfccws" rel="nofollow">https://www.youtube.com/watch?v=VSBB0wfccws</a></p>
  
  <hr>
  
  <p>I tried to use css3 masking (svg/gradient) but with no success.</p>
  
  <p>Here is a simple wipe effect with no masking:</p>
  
  <p><a href="http://plnkr.co/edit/Sys20pLwGb1MK8gBiX5a?p=preview" rel="nofollow">http://plnkr.co/edit/Sys20pLwGb1MK8gBiX5a?p=preview</a></p>
  
  <pre><code>$(function(){
    $('.second').velocity({    
      width: ['100%', 0]
    },{
      duration: 2000,
      loop: true
    })
  })
  </code></pre>
  
  <hr>
  
  <p>Preferably it should work on all modern browsers.</p>