SVG Animation and origin problems

[gioroc]

Wow, my first post on GreenSock forum!

Hello everybody!!!

 

After long studies and offline test, i had try something more "advanced" (for me).

I want, starting from a free svg that i found online, animate a robot.

In the codepen url you can find my first test.

 

All work fine, but i hate the starting setting with all the reset for the head and arms of the robot. I think that should exist a better and cleaner solution to do the same things!

I have try to play with transformOrigin and svgOrigin, but i can't see real difference. Maybe i haven't understand it really...

Can somebody help me to optimize the code and make it better? So i can learn new things...

 

One final question about the legs. Which is the better solution to have the legs comparing from the top of the body? Here i try with scale, opacity and origin. In pure js i would make them position absolute and then animate the height.

Which is the solution that you should deploy?

 

Thanks to everybody!

See the Pen VKZLVY by gioroc (@gioroc) on CodePen

[Dipscom]

Hello gioroc, 

 

Welcome to the forums!

 

I can't go over your code right now to see what might or might not be wrong with it (the code pen really helps to have an idea of what you are looking for) but I thought I'd sweep by with a couple of pointers in the hope that they might help you. If they don't, fear not, someone else will come by and offer more detailed assistance. Even if that fails, I'll be back at some point and shall deconstruct this for you.

 

The main thing I want to point is that where you are defining your transformOrigin will play a big role on how it affects your element. See the bellow pen, no transformOrigin and two transformOrigins - note the tiny difference between the transformOrigin ones - granted, this is an outlier case scenario but it's to illustrate a pointe.

 

See the Pen xEkdwz by dipscom (@dipscom) on CodePen

 

The other thing I wanted to mention is: when doing character animation with SVG it pays to understand the actual SVG tree structure and be able to edit/amend it to create an organised flow. Not saying that you have it wrong, just saying that SVGs straight out of a drawing software tend to have a bit of clutter and it helps to be able to identify what might be throwing a spanner in the works.

 

From personal experience, when you have things like transform="translate(0.000000, -5.000000)" in your element straight from the vector program, these elements tend to misalign after a certain degree of complex animation.

 

Hope this helps a bit or at least points you in a way that might increase your understanding.

[gioroc]

Hello Dipscom, thanks for the help!

Yes, i think that the main problem is about the transform translate that i have on my SVG.

I'm use to organize the group and id with Sketch, save the SVG and then clean it with svgomg (usually with params Prettify code enable and compare gzippend and clean ids disable, all the other as default).

But the transform translate still remain in the SVG.

Do you have any tutorial or idea to understand how to clean them?

Thanks!

 

Giovanni

ps: one question about the forum. Can you see the codepen or not? i haven't understand...

[Jonathan]

Hello,

 

Just to add my two cents to Dipscom great advice.

 

Have you tried to use the special property svgOrigin which is part of the GSAP CSSPlugin. It helps with the various browser bugs that deal with transform-origin bugs. svgOrigin fills the gap to fix various transform-origin bugs. Recommended for use with SVG elements to resolve bugs. convert your transformOrigin to svgOrigin. Or play to see which one gives you the best on your SVG child elements.

 

Also what browser / browser version and OS / OS version are you seeing this issue on?

 

The CSSPlugin is whats used when you animate CSS properties in your tween.

 

CSSPlugin Docs: http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

• svgOrigin
  [Only for SVG elements] Works exactly like transformOrigin but it uses the SVG's global coordinate space instead of the element's local coordinate space. This can be very useful if, for example, you want to make a bunch of SVG elements rotate around a common point. You can either define an svgOrigin or a transformOrigin, not both (for obvious reasons). So you can do TweenLite.to(svgElement, 1, {rotation:270, svgOrigin:"250 100"}) if you'd like to rotate svgElement as though its origin is at x:250, y:100 in the SVG canvas's global coordinates. Units are not required. It also records the value in a data-svg-origin attribute so that it can be parsed back in. svgOrigin doesn't accommodate percentage-based values.

  See the Pen 06716224865c2c536cee5b4222d771ee by GreenSock (@GreenSock) on CodePen

  .

Try that and see if that helps.. and welcome to the GreenSock Forum gioroc

 

Helpful resource.. GSAP SVG Tips

 

http://greensock.com/svg-tips

[gioroc]

Hello Jonathan, thanks for the welcome and for the help!

The GSAP SVG Tips is my favourite page and is bookmarked since the begin of my GreenSock travel

I will read in the doc page you send me (until now i had just read the part that i need and not all the page).

 

For the use of svgOrigin and not transformOrigin, i will try!
But, according to Dipscom suggest, cleaning all the transform in the svg file i have all more easy

 

Thanks!!

[Dipscom]

Yes Giovanni, I do. You might not like it though.

 

How to clean them: you'll have to redraw it all by hand writing the code yourself. That is not ideal, I know. 

 

But, for complex shapes or those moments that is just impractical to write hundreds of lines of SVG code (not many people seem to be as pedantic as I am... :'( ) you can cheat.

 

The transform attributes have to be kept, because if you remove them the elements will not sit where you have drawn them. You will still have to do some editing by hand, by grouping the parts in another layer and animating that one <g> tag, rather than the one that contains the transform attributes.

 

Here's some pseudo-code to illustrate:

 

Initial

<g id="cuore" transform="translate(137.000000, 158.000000)">
 <path d="M2.5,21.733 C2.374,21.57 0.341,18.936 1.91,15.733 L2.153,15.231 C4.045,11.301 8.475,2.098 24.342,1.952 L24.706,1.952 C40.575,2.098 45.005,11.301 46.897,15.231 L47.139,15.733 C48.707,18.935 46.675,21.569 46.587,21.68 L38.835,32.819 L24.526,32.786 L10.213,32.819 L2.5,21.733 L2.5,21.733 Z" id="Shape" fill="#46354F"></path>
</g>

 

Amended

<g id="cuore">
 <g transform="translate(137.000000, 158.000000)">
  <path d="M2.5,21.733 C2.374,21.57 0.341,18.936 1.91,15.733 L2.153,15.231 C4.045,11.301 8.475,2.098 24.342,1.952 L24.706,1.952 C40.575,2.098 45.005,11.301 46.897,15.231 L47.139,15.733 C48.707,18.935 46.675,21.569 46.587,21.68 L38.835,32.819 L24.526,32.786 L10.213,32.819 L2.5,21.733 L2.5,21.733 Z" id="Shape" fill="#46354F"></path>
 </g>
</g>

This is obviously a hack, it works because each <g> tag has its own viewport and local coordinate system. Which is actually the very reason why the transform attributes work and break the animation in the first place.

 

Hope that helps you.

 

And yes, we can see your Pen just fine.