swampthang

This version works much better. I'm only changing the gain level of the background music in this one. There is no compression on the track. I created 2 GSAP timelines, 1 to be used for lowering the music (duckingTL) and one for handling turning it back up (releasingTL) because a user might choose a release speed value longer than the attack (lowering) speed value or visa versa.
 
Also, the knee value is really a slope setting so I chose varying eases based on the knee value.
 

See the Pen poWbMdK?editors=1010 by swampthang (@swampthang) on CodePen

Thanks for the input, Jonathan. Following is an explanation of why I couldn't replicate this in a codepen.
 
I finally found out what was causing those pesky errors. In case someone else runs into this problem I'm posting the resolution.
 
This is an Electron app which uses the Chromium browser. Electron allows you to create desktop applications using HTML, CSS and Javascript and you can use anything from the npm library just about.
 
Loading all the system fonts on a user's computer was just a matter of snagging all the font files in the various fonts folders but I was (wrongly) under the impression that I had to create a css file with @font-face rules in the electron app for all the local fonts. I found out that all I have to do is know the font-family for the font and it would style the fonts directly from the system. Having the css file with a bunch of @font-face definitions and font-family declarations was not only confusing the system, it was really slowing down the loading of the app.
 
I completely removed the css file and everything is styling correctly and the errors/warnings are gone!
 
Just in case you are curious, snagging local system fonts can be done with several libraries but here is one that only uses javascript. The creator of this library is actively working on it and very knowledgable about fonts. He's the one who enlightened me regarding not having to create the css file for system fonts.
 
https://github.com/rBurgett/system-font-families

Ok, I think I figured out a better way to handle this since it's just a background crossfade that I'm after. 
 

See the Pen pRRMjj by swampthang (@swampthang) on CodePen
 
Transition (crossFade) works fine in WebKit but not so smoothly in Firefox. If anyone has an idea on how to fix that in FireFox please speak up. Personally, I'm not worried about FF for my needs.

Hmmm, seems to have fixed the scale issue but it's not successfully setting Draggable now. Actually it was a conflict with how I have the transforms set up and CSSPlugin.useSVGTransformAttr = true. So I was able to fix the zoom from zero thing using the code above and remove CSSPlugin.useSVGTransformAttr = true.

I decided to use the _gsTransform.rotation = 0 approach. Doesn't nuke the positioning of the SVG. I updated the pen in case anyone needs help with this too. It's in the clearVars function on line 22.

The solution to the issue in this post is definitely Blake's post quoted above. The final, working version with the single paths not drawing issue fixed is here...

See the Pen KrYAdo?editors=1010 by swampthang (@swampthang) on CodePen

I think my thick skull is beginning to get the picture. I was not successfully implementing invalidate() and needed to deal with Draggable on the tweened object. Got a clue from Rodrigo when he said:
 
 
So, I changed the tween from a "from" tween to a "fromTo" tween. I'm able now to handle user changes because there are several variables available at all times.
There's an onRelease callback on a Draggable object that returns an endX and endY variable. The fromTo Tween contains a vars.startAt object that stores the from x/y vars in an object. So, if I drag the object to a new position, the endX/endY values are available and I can snag the startAt x/y values from the tween object. 
 
I built a new Codepen to play with all this and learn how things fire - when, what variables are returned, etc. Anyone who is interested in taking a look, it's here. 
 

See the Pen qNrEQq by swampthang (@swampthang) on CodePen
 
For example,
See the Pen mEKomP by swampthang (@swampthang) on CodePen
I figured out that if you set repeat to -1 (infinite repeat) the onComplete callbacks never fire (you can see the commented repeat on line 33). Little stuff like that can make a huge difference once you've built a big project and all of a sudden something isn't working like you think it should.

Wow, Blake! I just now saw this. Not sure how I missed your post. Always like seeing what you have to say. I looked over that Codepen and man, that makes my stomach hurt
 
You're smarter than the average bear, that's for sure. I bookmarked the wiki links to floods fills and marching squares. Hehe, for now, I'm just gonna push back on the art.

Thanks, Carl. I decided against using Raphael and of course, the Raphael FreeTransform tool. Ended up doing this.

See the Pen WxEzgj by swampthang (@swampthang) on CodePen