title: SVG image wave animation
body: <p>I'm working on animations here I have an SVG image I'm trying to move image like a wave continuously. I have tried using gsap and css still not getting. Can anyone suggest me any help will be appreciated</p>
  
  <p>GSAP </p>
  
  <pre><code>TweenMax.to("#turbwave", 8, {
    attr:{"baseFrequency":0.01},
    repeat:-1,
    yoyo:true
  });
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@keyframes wave {
    0% { 
      left: -80px; 
    }
    100% { 
      left: 0; 
    }
  }
  
  .container {
     width: 100px;
     overflow: hidden;
  }
  
  .container svg {
     position: relative;
     left: -50px;
     width: 200px;
     animation: wave 2s linear infinite;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg id="wave" xmlns="http://www.w3.org/2000/svg" width="1920" height="780" viewBox="0 0 1920 780"&gt;
    &lt;g&gt;
      &lt;g opacity=".75"&gt;
        &lt;path fill="#ffefdd" d="M518.416 278.813c100.975 408.098 513.434 328.466 588.907 253.974 75.473-74.493 153.228-259.973 324.949-282.534 154.635-20.315 317.211-182.93 487.728-78.482v453.068c-264.98 2.452-323.019-161.187-601.137 25.146-320.667 214.84-339.51 105.56-508.484 75.563S535.477 828.256 326.51 643.775C188.975 522.356 98.538 508.728 0 535.407V0h260.293c113.729 39.308 218.825 119.99 258.123 278.813z"/&gt;
      &lt;/g&gt;
    &lt;/g&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>