Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

How to move some parts of a SVG element in continuation with the other parts

Recommended Posts

Live sample


I am struggling to find out how hands in this sample move in continuation with the rest of the body.

Any clue would be appreciated.

Link to comment
Share on other sites

You can move a group of SVG elements by wrapping them in a <g> and animating that element.


If you still need some help, please provide a minimal demo and we'd be glad to answer any GSAP-specific questions. 

  • Like 1
Link to comment
Share on other sites

Like Jack said, nesting elements within another element, or an animation within another animation.

Take, for example, the first guy that appears with the blue shirt and tie. His entire right arm is a group which is animating slightly (the entire arm is rotating slightly to the right as you scroll). Within that entire arm group, there are two separate elements: one for his bicep/top part of his arm and another for his forearm/lower part of his arm. It's "transform origin" (aka anchor point or point at which it rotates) for the entire arm, is likely near the top of the shoulder. Then within that animation is a separate animation of his forearm rotating even more at the same time as the entire arm is moving. The transform origin for that forearm is likely near the elbow. So essentially it's two parts, connected to each other (by nesting), that are doing two separate rotational animations.

It's known as "character rigging". Many animation apps have this but it's essentially the same idea within HTML (except a lot more tedious to setup).

  • Like 2
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.