[SVG clip issue with iOS Safari & Firefox]

I am animating a photo within an SVG clip-path, what I have below works in IE11, Chrome and Desktop Safari, but doesn't work in FF and iOS Safari

 

 

I've been researching this issue here on the forums, and elsewhere, but I can't seem to implement the fix suggested here -

 

http://greensock.com/forums/topic/12062-masking-with-clippath-and-svg/

 

I understand the the Attr plugin could work, but I'm not quite sure how to utilize it.

See the Pen OMYEbX by mattparkerseverin (@mattparkerseverin) on CodePen

[Is it possible to tween SVG attributes when the SVG is a background-image?]

For example, 'fill'

[Tweening background-image SVGs]

Is this possible? Say I wanted to tween the fill property. I understand how to access this if the svg is embedded as an image or is written out in the DOM.

[Globally easing a timeline]

Thank you for your help!

[Globally easing a timeline]

Hi, I've been using Tweenlite for some time and am comfortable with it now. I'm just starting to learn TimelineLite/Max.

 

I'm having a hard time determining if it can do a specific task that I need.

 

I'd like to animate dozen of clips, they'd all fade in one after the other. I'd like to know if there is a way to globally ease a timeline?

 

For example, I may want to do a Strong.easeOut over the entire timeline so that the first few clips fade in very fast and the last few clips' timing lingers, not fading in as fast as the first ones.

 

 

Here is a crude example I made in After Effects, I made an animation where each square fades in, in .5 seconds, one after the other.

 

Then I placed that animation within a parent comp where I could ease the timing so the first squares are faster, and the ending squares are slower.

 

http://web.mac.com/mattparkerseverin/flash/example.html

 

Thank you in advance.