Adding html-elements to different groups inside of svg

[Lars Johan]

Hi

 

I have this:

 

<svg>
  <g id="number1">
    <path/>
  	<path/>
  </g>
  <g id="number2">
  	<path/>
    <path/>
  </g>
</svg>

<div class="number1">Foobar</div>
<div class="number2">Foobar</div>

I want to use gsap to position the <div class="number1"> at the bottom center of the position of <g id="number1"> and number2 at number2 and so on. How can I?

[Cassie]

Hi Lars, not really sure what you're asking here I'm afraid. GSAP isn't really for layout, it's for animating things!

Positioning in SVG requires an understanding of SVG's coordinate system - everything is basically drawn onto a grid which is defined in the viewBox. Layout of HTML elements requires knowledge of CSS positioning - absolute, relative, flex layouts etc

There isn't any CSS, or coordinates or a viewBox in your code snippet so I can't really advise further, but this also doesn't seem like a GSAP question. Maybe you can pop together a demo if I'm missing something.

 

Thanks!

[Cassie]

You could use Flip plugin's fit method, but if you're just statically positioning things that's likely just complicating something you could do with CSS.

https://greensock.com/docs/v3/Plugins/Flip/static.fit()

[Lars Johan]

Hi Cassie

 

Thanks for the answer. I made a codepen for you that should explain my question better.

 

See the Pen NWYxVEM by larshallen (@larshallen) on CodePen

[Cassie]

This is just a CSS positioning thing, no?

Not entirely sure what GSAP has to do with this. You can just make the parent relative and absolutely position the child wherever you want it. Or am I missing something? Is this dynamic? Is the circle changing position? If so you can use Flip as I suggested!

See the Pen qBobzvV by GreenSock (@GreenSock) on CodePen

[Lars Johan]

What I am trying to understand is if this is a question of CSS or GSAP, I can’t wrap my head around it yet with my level of understand. As far as I understand at the moment the div doesn’t stay center to center to the circle as it kind of floats around when the SVG changes dimensions in relation to sizes of the viewport. As for the GSAP-fit-solution, the box is going to be constrained inside of the circle, isn't that so?

Edit: I wrote that upper part and then discovered this: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image And now I understand that I can simply make all of the design work inside of illustrator and illustrator will later help me with the right syntax in the SVG. I updated the codepen.

[Cassie]

Positioning/Layout is very rarely a GSAP question, unless you're running into layout issues when animating things.

You're definitely going to find the answer to this either in SVG layout or CSS layout land. I would probably put the image in the SVG like you've suggested. Keeps everything nice and tidy.

 

Good luck!