Attr Plugin Problem

[Page Tailoring]

Hi,

 

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();
      
      logoAnimation
            .from('#Path_23', 4, {attr:{x:30}, ease:Linear.easeNone});

 

 

http://links.stawiarski.eu/AttrPluginProblem/

 

 

After finding a solution, the real question should be:

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

 

Answer:

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.

[Jonathan]

Hello @Page Tailoring and welcome to the GreenSock Forum!

 

Yes you can do that with the GSAP AttrPlugin.

 

See the AttrPlugin Docs: https://greensock.com/docs/Plugins/AttrPlugin

 

Happy Tweening

 

 

[PointC]

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.

 

[OSUblake]

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. 

 

 

[PointC]

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.

[Page Tailoring]

@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.

 

[OSUblake]

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

https://stackoverflow.com/q/13329125/2760155

 

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"});

 

[Page Tailoring]

thank you very much @OSUblake

[PointC]

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.