SVG image wave animation - html

Question

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
GSAP
TweenMax.to("#turbwave", 8, {
attr:{"baseFrequency":0.01},
repeat:-1,
yoyo:true
});
#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;
}
<svg id="wave" xmlns="http://www.w3.org/2000/svg" width="1920" height="780" viewBox="0 0 1920 780">
<g>
<g opacity=".75">
<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"/>
</g>
</g>
</svg>

Answer 1

The reason why you cannot currently animate your SVG like the one in the answer you linked is because they fake the wave by just translating the wave and having each side match up. If you remove the set width in the example on that answer you can clearly see this:
#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;
}
<div class="container">
<svg id="wave" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 456.7 39.9" style="enable-background:new 0 0 456.7 39.9;" xml:space="preserve">
<style type="text/css">
.st69{fill:none;stroke:#000000;stroke-width:12;stroke-miterlimit:10;}
</style>
<path class="st69" d="M4.2,33.2c0.1-0.1,7-6.9,15.9-13.8C27.7,13.7,38.7,6,47.5,6c7.5,0,14,6.6,20.3,12.9l0.4,0.4
c6.8,6.9,14.6,14.6,24.6,14.6c9.9,0,17.7-7.8,24.5-14.6l0.5-0.5C124,12.5,130.5,6,137.9,6c7.5,0,13.9,6.5,20.2,12.9l0.4,0.4
c6.8,6.9,14.6,14.6,24.5,14.6c10,0,17.8-7.8,24.6-14.6l0.5-0.5C214.4,12.5,220.9,6,228.4,6c7.5,0,14,6.5,20.2,12.9l0.4,0.4
c6.8,6.9,14.5,14.6,24.5,14.6c9.9,0,17.7-7.8,24.5-14.6l0.3-0.3c6.3-6.4,12.9-13,20.5-13c7.5,0,14.1,6.6,20.4,13l0.3,0.3
c6.8,6.9,14.6,14.6,24.5,14.6c9.9,0,17.6-7.8,24.5-14.6l0.2-0.2C395.1,12.6,401.6,6,409.2,6c8.7,0,19.8,7.7,27.3,13.4
c8.9,6.8,15.9,13.7,16,13.8"/>
</svg>
</div>
In order to animate your SVG like a wave it will be more complex because the ends don't match up to each other. You likely need to use an SVG animation tool like GSAP's MorphSVG (which is a paid plugin, but you can try it out free on CodePen).
With MorphSVG I'd recommend making 2 or 3 different SVG and then animating between them using MorphSVG. There are several examples of how to do this on the GreenSock website.
For more about MorphSVG see the GreenSock page for it.

Answer 2

For Wave SVG you may use this:
<svg id="wave" viewbox="0 0 100 15">
<path fill="#fff" opacity="0.5" d="M0 30 V15 Q30 3 60 15 V30z" />
<path fill="#fff" d="M0 30 V12 Q30 17 55 12 T100 11 V30z" />
</svg>