JavaScript "clip-mask" scroll equivalent (GSAP and ScrollMagic available)

Question

JavaScript "clip-mask" scroll equivalent (GSAP and ScrollMagic available)

Question

Is there a way to fade content on a gradient like clip-maskusing JavaScript or jQuery?

Problem

I have a fixed header with a transparent background and a .png logo with transparent elements. I have translucent elements that scroll vertically up the page and therefore under the heading and logo.

When things scroll under the logo they are viewing and everything looks pretty bad.

Proposed solution

We want to weaken the content above a certain point (at the bottom of the title). We use ScrollMagic with GSAP to animate elements as they scroll, which causes conflicts with clip-pathother CSS fixes, so I'm most likely looking for a JavaScript / jQuery fix.

enter image description here

Code example

At the request of the commentator, I created a JSFiddle that includes several parts.

There are two elements to consider: #mastheadand #content. There is an area (c blue) below #mastheadin which I would like to #contentfade as a gradient from opacity 1to 0.