Scroll Based Animation Working Outside Of Defined Area

So I'm super new with JS. I'm trying to get a scroll animation to work only in a designated area but instead my 'position: fixed' tag is causing it to appear at the top of my site

Solution 1:

The SVG content is not in the 'frame' div. Move the closing </div> tag from the first line of code to the last.

Solution 2:

I think the answer to this question Using jQuery to keep scrolling object within visible window will help you out. Basically, take away the fixed position in the css and then set the position propery to fixed using jQuery inside of the scroll event handler once the user has scrolled far enough. Also, don't start the drawing animation until then either.

I hope that helps!