Jump to content
GreenSock

thiagosib

CSS vs SVG Drinkging man

Go to solution Solved by alig01,

Recommended Posts

@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

Link to comment
Share on other sites

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!

  • Like 1
  • Thanks 1
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.
×