Transform Syntax When Using the Attribute Plugin?

[dada78]

Hi guys,

 

I am trying to use the Attribute Plugin to ensure that my SVG also animates in Firefox, but can't figure out the correct syntax for this:

.fromTo("#star",1, {attr:{transform:"scale(0.2)"}},{attr:{transform:"scale(1)",transform:"rotate(360)"}})

The issue:

This above code ignores the fromTo scale tween completely and just rotates the SVG

 

and this gives me a syntax error:

.fromTo("#star",1, {attr:{transform:"scale(0.2)"}},{attr:{transform:"scale(1)","rotate(360)"}}) 

All I want to do is scale up and rotate the star at the same time from transformOrigin:"50% 50%". I tried that as well as transform-origin:"center center" inside the Attr plugin with no luck.

 

Thanks!

 

[GreenSock]

If I understand your goal correctly, it should be as simple as:

.fromTo("#star", 1, {scale:0.2, rotation:0, transformOrigin:"50% 50%"}, {scale:1, rotation:360});

Does that help?

 

GSAP does a lot of work for you to make transforms much easier. As long as you've got CSSPlugin loaded (and it's inside of TweenMax too), it'll identify that "#star" is an SVG element and figure out how to correctly apply those transforms in a cross-browser way. 

[dada78]

Thanks Jack,

I should have mentioned that I am storing an SVG clip-path in a <defs> element so I needed to use the attribute plug-in I thought in order to work across browsers, otherwise I don't get it to work in Firefox.

<svg class="svg-defs">
<defs>
      
<clipPath id="clipping">
   <polygon id="star" points="98.4999978 153.75 38.2520165 185.424245 49.7583542 118.337123 1.01670635 70.8257603 68.3760155 61.037872 98.5000012 1.1379786e-14 128.624005 61.0378871 195.98331 70.8258091 147.241642 118.337136 158.747982 185.424247"/> 
</clipPath>
<defs>
</svg>

HTML

<div class="clipPathSvg"> 
    <svg width="200" height="300">
         <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/156178/cornonthecob.jpg" width="200"  height="300" />
    </svg>
</div>

Then in my CSS

.clipPathSvg img {
    clip-path: url(#clipping);
}

Thanks!

[OSUblake]

Can you make a demo? If you're talking about a non-graphical element like a clipPath or a mask, you need to make sure the transform attribute is on the element first.

See the Pen 8302a8634451980d2a49f0073e883fee by osublake (@osublake) on CodePen

 

And I don't think you can set a transform origin for scaling, so you would need to also add a negative translate to the transform.