ideagonal

Yep, that's it! And so bad for me it's in the GSAP docs: I should know better RTFM! Thanks for your help.

Well, I've prepared a pen with 2 inline SVGs. The first one is a reduced example of what I want and it is working and shows what I want, each pair of circles moves from a relative point (y:-20) to its initial position. The second one is a Sketch SVG graphic where I can't get it to work. The second and third row starts moving from the top, instead of its initial position -20, despite of using "transformOrigin". It seems a <g> can't have x and y values, so I think this is the problem. The Sketch generated graphic positions the <g> using "translate". Is there a way to do this other way?

No, no, sorry for the misunderstanding. I just used Hype to show what I want to get with just GSAP and a SVG. I want to move several groups <g> inside a SVG but using its own position as a reference, e.g. its actual "y" position +50px.

Hello, I've started to learn gsap in order to animate SVGs. I'm stuck trying to translate an element relative to itself. I've uploaded to Gifs as examples, "test_hype.gif" shows what I want (using tumult hype, I'm a graphic designer) and "test_gsap.gif" shows what I've managed to get using gsap so far. As it seems "translationOrigin: "50% 50%" affects rotation but not translation, where always takes the surrounding SVG coords as reference. The code I'm using is: var circle = $("#circle"), clase1 = $(".clase-1"), clase2 = $(".clase-2"), clase3 = $(".clase-3"); TweenLite.from(clase1, 2, {y:0}); TweenLite.from(clase2, 2, {y:0}); TweenLite.from(clase3, 2, {y:0, transformOrigin: "50% 50%"}); TweenLite.to(circle, 1, {rotation: 180, transformOrigin: "50% 50%"}); As you can see "clase3" starts to move from the same y coord than the others. Maybe I should dig deeper in the docs but I haven´t found so far why this is not working. Thanks in advance, Alejandro Godoy.