[SVG elements translation origin]

Yep, that's it!

And so bad for me it's in the GSAP docs:

Quote

Notes / tips:

• Passing values as Strings and a preceding "+=" or "-=" will make the tween relative to the current value. For example, if you do TweenLite.to(element, 2, {left:"-=20px"}); it'll tween left to 20 pixels less than whatever it is when the tween starts. {x:"+=20"} would add 20.

 

I should know better RTFM!

Thanks for your help.

[SVG elements translation origin]

Well, I've prepared a pen with 2 inline SVGs.

 

See the Pen OgmXRQ by ideagonal (@ideagonal) on CodePen

 

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?

[SVG elements translation origin]

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.

[SVG elements translation origin]

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.