Jump to content
Search Community

Svg animation x y val prblm in mozila

Guest join_shailesh
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

Guest join_shailesh

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 . 

 

 

 

 

Link to comment
Share on other sites

Guest join_shailesh

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 . 

Link to comment
Share on other sites

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? 

  • Like 2
Link to comment
Share on other sites

Guest join_shailesh

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.

  

Link to comment
Share on other sites

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

.

  • Like 3
Link to comment
Share on other sites

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 !

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