Jump to content
Search Community

Transform Syntax When Using the Attribute Plugin?

dada78 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.




Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

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">
<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"/> 


<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" />

Then in my CSS

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


Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...