Svg animation x y val prblm in mozila

[join_shailesh 1 Likes (Newbie)]

Hello friends,

 

i am trying to animate svg path  element just giving X & Y transition bt it work properly in chrome  bt not in mozila so please give suggestion 

 

please check bellow pen link  on chrome as well mozilla 

 

See the Pen WwbNjG?editors=0010 by shailesh_1299 (@shailesh_1299) on CodePen

 

animation regarding girl charecter which raise their hand . 

 

 

 

 

[join_shailesh 1 Likes (Newbie)]

Hello friends,

 

i am trying to animate svg path  element just giving X & Y transition bt it work properly in chrome  bt not in mozila so please give suggestion 

 

please check bellow pen link  on chrome as well mozilla 

 

See the Pen WwbNjG?editors=0010 by shailesh_1299 (@shailesh_1299) on CodePen

 

animation regarding girl charecter which raise their hand . 

[Dipscom 2,815 Likes (Superhero)]

Hi join_shailesh,

 

I have looked at your animation in both Google Chrome and Mozilla Firefox but saw nothing breaking. Both animations looked the same to me.

 

What exactly would you say is wrong in the animation? 

[join_shailesh 1 Likes (Newbie)]

hii 

 

sorry please check once again i think i have make modification 

please follow the link

 

See the Pen WwbNjG?editors=0010 by shailesh_1299 (@shailesh_1299) on CodePen

 

u can see the change when she raise their left hand see care fully or make it slow 

 

thank u

[Dipscom 2,815 Likes (Superhero)]

Still not seeing anything that I would call "broken". The only thing I see is at the very end of the animation, when the arm stops there's a slight movement as if it is going from half a pixel to a whole pixel - Could be Firefox's anti alias, though.

 

Still looks fine for me. Do you think you could recreate the problem with a less complex setup? 

[join_shailesh 1 Likes (Newbie)]

Hi  Dipscom, 

 

thank for watching.

 when the arm stops there's a slight movement as if it is going from half a pixel to a whole pixel

that's i am trying optimize i don't want that slight difference . is it browser problem or problem in my code or anything  

 

please see once again and give suggestion to fix it.

  

[Dipscom 2,815 Likes (Superhero)]

join_shailesh,

 

When trying to troubleshoot something, the best approach is to start with the simplest setup and slowly add complexity. That way, you can control the number of variables that might be affecting your code and makes it a lot easier to spot mistakes.

 

It was great that you provided a CodePen to begin with but that was not what I would call a reduced case scenario. I commented out the vast majority of your code, leaving only two elements - the shoulder and the body - as it was the only bit that I could see something not 100% right.

 

I also removed some extra code that you added to clear GSAP's inline styling.

 

The result - The issue reported, disappears in this case. The problem is in your code. I would go as far as to say it probably is with the way you are trying to use clearProps. Is there a reason for that? I don't see the need for you to use clearProps. 

 

And as OSBlake mentioned on the other post - you have misaligned timings for some of your animation.

 

If you want to animate body limbs, you should set them up structured as the actual limb is. E.G. The shoulder is the parent of the elbow/forearm, who's the parent of the wrist/hand/fingers. That way, you rotate the shoulder, the rest rotates with it.

 

See the Pen EKjPPO?editors=1010 by dipscom (@dipscom) on CodePen

.

[Jonathan 5,176 Likes (Superhero)]

I would second Dipscom's great advice on how you should setup your SVG paths like the actual limbs. So you should group each part of the body..

 

For example your right arm should have its own separate <g> group tag. So the shoulder, bicep/tricep, forearm and hand should be in the same group tag. This way when you rotate that right arm, the arm group will rotate together instead of trying to rotate each part separately.

 

Normally in 3D animation you would set up an inverse kinematics, where moving a hand would move the forearm, and moving the forearm would move the bicep/tricep, and in turn move the shoulder.

 

But with SVG your best bet is to just group all the limbs into group tags like Dipsom advised. Then you will have greater control and be able to use less tween to rotate a limb, versus just rotating individual parts

 

But that is just my two cents !