SVG elements translation origin

[ideagonal]

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.

[Dipscom]

Hi @ideagonal!

 

Welcome to the forums! 

 

I am just a bit confused. Are you trying to work in Tumult Hype with GSAP? I never used Hype so, I won't be able to help you there. But I will be able to help you with GSAP and SVG.

[ideagonal]

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.

[GreenSock]

Howdy, @ideagonal. Welcome to the forums. Any chance you could post your SVG? It's kinda tough to discern what's going on without seeing that. I want to see how exactly those elements are positioned originally (using transforms? attributes? Do they start all the way up at the top?) Better yet, if you could provide a reduced test case as a codepen, it'd be amazing. 

 

 

[Dipscom]

Hey @ideagonal, well you have been graced by an appearance of the MIGHTTTTY GREENSOCK in his digital self! Fills me with pride to say he said what I was going to say (no hindsight bias here, honest. )!

 

Anyhow, as Jack has said. If you can provide us with a reduced case scenario, we will be able to help you. What yo are trying to achieve is possible and not complicated, it might just be a case of naming the correct groups and organising your SVG in a different way.

[ideagonal]

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?

[Dipscom]

Hey @ideagonal!

 

I think you are answering your own question here. See where you state that you want the element to 'move from a relative point' - That's what you need to do in order to have the boxes move relative to their current position. It would be something like:

 

TweenMax.from(classe1, 1, {y:'-=20'});

 

You don't even need transformOrigin.

 

Here's a fork of your pen with an alternative way of setting your tween up:

 

See the Pen GEmjXb?editors=0010 by dipscom (@dipscom) on CodePen

 

[ideagonal]

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.

[Dipscom]

Learn a new thing every day