title: HTML CSS JS Wave draw and animation
body: <p>I am working on an Ionic cross-platform mobile app and I have the basic design and layout completed. However, I want to implement some eye-catching design elements i.e. a "wave effect" on some pages.</p>
  
  <p><strong><em>The 1st part</em></strong> would be to draw the waves on the screen.
  The design I have mocked up in Photoshop is as below.</p>
  
  <p><a href="https://i.stack.imgur.com/Bt9dN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Bt9dN.png" alt="enter image description here"></a></p>
  
  <p>By the "wave effect," I mean the wavy lines that are the gradually increasing transparent lines between the pure white bottom section and the top yellow section.</p>
  
  <p>In this case, there are 4 waves overlapping, each with 25% opacity giving the final 100% white opacity at the bottom.</p>
  
  <p>If at all possible I would like them to intersect at the round pink + button as well. But this would be a "nice to have" feature. </p>
  
  <p><strong><em>Secondly</em></strong>, how would I animate the waves to move on e.g. a button click?
  The idea is that when a user clicks the pink + button, the waves would move up to reveal more of the UI below.
  Similar to <a href="https://dribbble.com/shots/2208818-Yahoo-News-Digest-Redesign" rel="nofollow noreferrer">THIS</a> effect.</p>
  
  <p>I have no idea what this would even be called to Google it.
  I have searched for waves or sine waves, but nothing similar to this.</p>