Jump to content
Search Community

Attr Plugin Problem

Page Tailoring 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,

 

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

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

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

 

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.

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