SVG draw with css positioning issues.

[NovamIT]

Hi, 

 

The GSAP part of this question, o have pretty much under control I think, but I'm having some other issues.

 

I'm working on a project, and normally i'm pretty decent with CSS, but this one just doesn't seem to click for me. Maybe someone here has an idea for fix this thing.  There's this hero design, this hero contains a SVG which I will animate using GSAP draw SVG later on. The SVG is placed absolutely at this moment in the hero section. it's a drawn line from right to left (not completely to the left), circling the heading (which is on the left part of the container) and at the end pointing to a button. While using position absolute I can position it for a specific viewport, but ofcourse when this shift, the line isn't positioned correctly anymore (specially with using clamped spacing and fontsizes).   I've created a codepen where you can see the idea.

 

Im able to inject the svg as a before element to the button and pin it correctly that way, but for what I've read, I cannot animate the svg as a background in a before element.

 

Would there be a GSAP way to SET the element or to inject the element by JavaScript in a correct size and then animate it?

 

Regards Wouter

See the Pen jOQLJeV by NovamIT (@NovamIT) on CodePen

[Rodrigo]

Hi,

 

SVG is really not something I excel at so I don't know what help can I provide here.

 

Maybe this post by @Cassie can help:

Finally maybe these videos @Carl made can help as well:

 

Hopefully this helps.

Happy Tweening!

[Cassie]

Hiya, I gave this a read a few times and it's not clear where you need the SVG positioned. Just that you're struggling to position it.

Happy to help if you can provide that info!

[NovamIT]

Hi, Sorry I wasn't really clear about it. The SVG should be positioned to the right side of the screen ( So right: 0;) and the arrow should point to the left button in the hero section. The arrow can shift a bit, but shouldn't get out of the container. If the svg could be positioned to the outer left of the container wrapper, it should be good. because the SVG is wider then the arrow.  

[Cassie]

Mmm sounds like you're trying to impose a lot of rules that are going to end up conflicting.

 

You may need different shaped SVG's for different screen sizes, or maybe to build something out more dynamically?

Here's a shot at it, you can keep the arrow in the right place and the wisth right, but you won't get the heading circles every time. You've got a very dynamically changing layout and a pretty fixed graphic, so you're inevitably going to run into little speedbumps.

See the Pen poQdLro?editors=1100 by GreenSock (@GreenSock) on CodePen