Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Page Tailoring

Attr Plugin Problem

Recommended Posts

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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

 

Share this post


Link to post
Share on other sites

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

 

  • Like 5

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×