Combining the Attr and Bezier plugins for SVG clip path animations

[zachschnackel]

Hi all,

Referencing http://greensock.com/forums/topic/12272-animating-svg-masks-clip-path-not-working-in-firefox/ it appears that using the Attr plugin when animating SVG clip masks resolves a long-standing issue with Firefox not being able to target these properties correctly. My issue however is that I am animating elements that are within an SVG clip mask, not solely by the attributes plugin, but with the Bezier plugin. Is there a way to combine these two plugins to correct this behavior in Firefox? Thanks!

[Diaco]

Hi zachschnackel 

 

you can simply use onUpdate callback with a tween of simple object , like this :

 

var XY = {x:0,y:0};

TweenLite.to(XY,1,{bezier:{values:[...]},onUpdate:function(){
  console.log(XY.x)
  yourElem.setAttribute( "attribute" , XY.x );
}})

[zachschnackel]

Hi @Diaco,

Thanks for the reply! It appears you might be talking about grabbing the updated `cx` or `cy` attribute from the element, but it is being changed via the transform property. If I do something like:

      onUpdate: function() {
        this.target[0].attributes.style.cssText = this.target[0].attributes.style.nodeValue;
      },

Then I can see the style node being updated just fine, but the attribute itself never moves.