Absolute div wrappers, or SVG coordinates. What do you suggest?

[sashaikevich]

Hi community,

I'm planning a complex responsive animation and am at a crossroad... The first scene has about 7 SVG elements revolving around, and converging at a single point (think satellites circling a planet and losing orbit).
 

One way that I thought to do it, is to wrap the elements in individual divs. Then I can give them an absolute position and make them coming to a single point easy. But I don't see a way of having them rotate around a point (like I could do with svgOrigin).

Another way, is to just have one SVG, and use getBBox to figure out the locations as @Carl suggested here, but I don't think it's cross-browser and mobile compatible. 

A third way, since it's only like 7 elements, is to maybe have each element follow a bezier path. I wouldn't be rotating the SVG, I would just have the elements follow a spiralling path.

What do you think would be the best approach?

[sashaikevich]

Come to think of it, this could also work: https://greensock.com/forums/topic/14426-a-way-to-set-movefrom-and-moveto-positions-in-bezierplugin/?hl=bezier#entry61409 - tweening the progress on one big path. 

[smallio]

7 hours ago, sashaikevich said:

What do you think would be the best approach?

 

Personally I'd convert everything to beizer data using morph SVG & then do something like this. Rinse & repeat for as many "orbits" as you need. pathDataToBezier can convert all of them together in one go as well.

 

See the Pen jJaPLx?editors=1010 by smallio (@smallio) on CodePen

 

Hope it helps

[sashaikevich]

Nice, thanks!

[sashaikevich]

By chance I found the EXACT animation I want, right here on the custom wiggle page: https://greensock.com/wiggle-bounce 
There is a demo at the top of the page, and how the circles come together into a larger one, then explode in a single color is the exact animation I had in mind. 

 

Can I see the timeline code anywhere? @PointC @Carl

 

(I only got about this far on my own: 

See the Pen BERGRw by anon (@anon) on CodePen

 )

[Carl]

hi @sashaikevich the wiggle-bounce demo is here. take a look at the the finalSequence() method

 

 

See the Pen bBXEvR?editors=0010 by GreenSock (@GreenSock) on CodePen

[sashaikevich]

@Carl thanks!