Centering Groups with Circle and Path

[Francesco Hayes]

I have been struggling to find a way to center a select number of groups from an svg in their respective container. For some reason, the groups are always a little off.

The "navyDots" all need to be vertically center at the end of the timeline.

 

 

See the Pen OJqQQzm by francesco-hayes (@francesco-hayes) on CodePen

[GSAP Helper]

Hm, there's about 400 lines of HTML/CSS/JS in that demo and it's not entirely clear what GSAP-specific question you're asking. Can you please clarify (and make your demo a lot simpler, isolating only the specific challenge)? 

 

Here are some things to include in order to increase your odds of getting a good answer: 

• A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
• A clear description of the issue -  "the purple div only spins 90deg"
• A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 
• A minimal demo - Just some colored elements is great.

Thanks for being a Club GSAP member! 💚