CSS vs SVG Drinkging man

[thiagosib]

@GreenSock Hi I've discover an great animation made with snap.svg and in the comment section I saw a comment of you I guess in which you say you want to create a version of GSAP animating this svg. Do you create this gsap version ? cause I had a hard time finding what the leftArm.stop().animate(
    {transform:'r65,70,150'} could become in gsap.
   

See the Pen raqKQm by mariosmaselli (@mariosmaselli) on CodePen

[Rodrigo]

Hi @thiagosib and welcome to the GreenSock forums!

 

GSAP uses both transform origin and SVG origin when it comes to applying transforms to elements. Each property should be used in specific cases depending on the needs of the project. You can take a look at it in this example:

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

 

Animating joints and those movements is not the easiest thing to do, but using SVG origin can simplify things quite a bit. Check the docs to learn a bit more about it (scroll down, around the middle of the page you'll find the info on the different origins):

https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin

 

If you keep struggling, please create a minimal demo that shows what you have done so far and where exactly you're having problems.

 

Happy Tweening!

[alig01]

Hey, I tried it out of curiosity.

 

See the Pen poKJOJy?editors=0010 by alig01 (@alig01) on CodePen

 

And thanks for the link @Rodrigo, it was very helpful.