TweenMax goes to counterintuitive x and y value in SVG

[mikesol]

Hey all,

 

Using a technique described in Animation Distorts Initial Scale and Values, my goal is to take all of the elements in an SVG and move them to the same X and Y position.  I would have thought that lines 19-23 in the JavaScript in the codepen do this, but they wind up scattering the elements all over the place.

 

Inspecting the DOM in my real-life example, I see that all of these have a property "data-svg-origin" set that I am not setting myself.  This property is different for a lot of the elements and I believe that this is what is causing the the discrepancy in the x and y positions.

 

In my codepen, I've commented out relative transforms (+=100) of x and y.  These work, but it is not what I want to do - I'd like to move everything to the same absolute position.

 

Does anyone know how to accomplish this?

 

Thanks!

~Mike

See the Pen BoVxLY by mikesol (@mikesol) on CodePen

[Diaco]

Hi mikesol 

 

pls try like this :

var BB = document.getElementById('svgElem').getBBox();
TweenMax.fromTo('#svgElem',10,{x:BB.x*-1,y:BB.y*-1},{x:'+=100',y:'+=100'});

See the Pen GpJjaB by MAW (@MAW) on CodePen

[mikesol]

Thanks for the suggestion!

Unfortunately, while in your example this works, it does not work in the example I posted earlier.

I've modified my codepen to show the problem - I can get the music to scrunch up at the origin, but not to fan out to its original position: 

See the Pen avjOqy by mikesol (@mikesol) on CodePen

 

All this could be solved with TimelineMax by just resetting to the beginning of the timeline.  However, then a new problem crops up with interpolation in that I can't figure out how to interpolate between two non-sequential points on a timeline.  I will post a different thread for that.