Jump to content

Page Tailoring

Attr Plugin Problem

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



I'm trying animate SVG path with attrPlugin. I can't find any docs about it.


Can I use Attr Plugin to move path exatly x:30?


Path is from Adobe XD export.

Path like this for exemple:

          <path id="Path_23" data-name="Path 23" class="myGreen" d="M601.019,474.723q-6.417,0-7.933-5.526l-25.239-86.07q-2.408-8.553-11.319-8.555h-2.854a2.541,2.541,0,0,0-2.494,3.21l27.111,92.925q4.454,15.87,22.728,15.87c.158,0,.3-.02.452-.025V474.667c-.163,0-.287.055-.452.055" transform="translate(-3723.339 3675.66)"/>


this dosen't work:

      var logoAnimation = new TimelineMax();
            .from('#Path_23', 4, {attr:{x:30}, ease:Linear.easeNone});






After finding a solution, the real question should be:

How to animate transform (x,y) of elements SVG Adobe exported file?



The easiest way is to use CSSPlugin and use relative values, like x: "-=180".



See the Pen bPPrwa?editors=1010 by bartek-stawiarski (@bartek-stawiarski) on CodePen

Link to comment
Share on other sites

Your path doesn't have an x attribute so the AttrPlugin won't work here. You'll need to transform it.


logoAnimation.from('#Path_23', 4, {x:30, ease:Linear.easeNone});


Happy tweening.



  • Like 2
Link to comment
Share on other sites

Your path is sitting at a crazy coordinate. See those two numbers inside the transform="translate()" on your path?


translate(-3723.339 3675.66)


That's how far your path has been moved (x y). 


30 is nowhere near -3723.339. That's like out in left field. 



  • Like 3
Link to comment
Share on other sites

19 minutes ago, OSUblake said:

That's like out in left field. 


Also in sub basement level 36. ;)


I was curious about those coordinates too. I'm assuming Adobe XD spit out those values.

  • Like 1
Link to comment
Share on other sites

@PointC yes, adobe XD giving a crazy number, that are coordinates for the whole document, not for the exported group of paths.

I have a new file with smaller coordinates. But still, I don't know how to move a path.


Now I have translate(81.157 34.104) and I want to add 50 to x. (thx @OSUblake)


<path id="Path_23" data-name="Path 23" class="cls-3" x="0" y="0" d="M585.648,443.9q-4.442,0-5.492-3.826l-17.472-59.584q-1.667-5.921-7.836-5.923h-1.975a1.759,1.759,0,0,0-1.727,2.222l18.768,64.329q3.083,10.986,15.734,10.986c.11,0,.205-.014.313-.017v-8.227c-.113,0-.2.038-.313.038" 
    transform="translate(81.157 34.104)"/>


Best I have come up with, is:

logoAnimation.from('#Path_23', 4, {attr:{transform: "121.157 33.538" }, ease: Expo.easeInOut});


And in chrome dev tools it look ok, transform="translate(81.157 34.104)" is changing ok.

But consol giving me 233 errors like:


TweenMax.min.js:17 Error: <path> attribute transform: Expected transform function, "81.178 34.103".


And path is disapering during animation.


Do you have idea how I should that write?


it is still here: http://links.stawiarski.eu/AttrPluginProblem/


I have put it codepen:

See the Pen bPPrwa?editors=1010 by bartek-stawiarski (@bartek-stawiarski) on CodePen


Link to comment
Share on other sites

Getting rid of transforms depends on your software. For most, you can usually ungroup and group your paths.



It's best to let GSAP handle anything transform related. I would forget about using the AttrPlugin for now. It has it uses, but usually not for moving stuff.


So this will move it forward 50.


logoAnimation.to('#Path_23', 4, { x: "+=50"});


Or back 50.


logoAnimation.to('#Path_23', 4, { x: "-=50"});


  • Like 5
Link to comment
Share on other sites

PS I don't know anything about Adobe XD or how it exports assets, but I wrote a little bit about Adobe Illustrator exports here:

Maybe it'll help. Happy tweening.

  • Like 3
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.