Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
sashaikevich

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

Recommended Posts

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?

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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 :)

  • Like 2
Link to comment
Share on other sites

  • 5 weeks later...

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

 )

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.
×