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

[Hooman2021]

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.

[GreenSock]

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. 

[davi]

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