Jump to content
Search Community

SVG elements translation origin

ideagonal test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.



Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. 



  • Like 2
Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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


  • Like 4
Link to comment
Share on other sites

Yep, that's it!

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


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.

  • Like 1
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.
  • Create New...