MorphSVG ConvertToPath swap element

[romain.gr]

Hi,

 

I'm working on a little experiment using gsap and the svg ConvertToPath function, I was wondering if, instead of replacing the <rect> element by a path element, it was possible to save the result of the conversion into a variable and not deleting the original <rect> element.

 

On resize event I'm actually calling that convertToPath function but if it remove the original <rect> el, it can't do the conversion anymore as that element has been "replaced".

 

What I try to achieve (see codepen), is everytime you resize the screen, the rect conversion to path is saved in a variable, so that I can append (or prepend) the new path to the <svg>, and the text will follow the new path. At the moment when you resize the screen the text follow the path created on load.

 

So first I'd like to know if it's doable (saving the rect conversion into a variable instead of swaping it by a path el), and then I'm curious how others would achieve that text effect (with html, css and svg, not with canvas).

 

Thank you

See the Pen jOPWzeW by romaingranai (@romaingranai) on CodePen

[romain.gr]

I finally manage to make it work, but if anyone has a better idea I'm still interested.

 

See the Pen YzXwLvz by romaingranai (@romaingranai) on CodePen

[ZachSaucier]

Hey romain and welcome.

 

There's a second parameter to convertToPath that is called swap. If you set it to false, it will create a new path (but not append it to the page) and leave the original path. So you could append the path to the original page (making sure to remove the old one).

 

I also upgraded your pen to GSAP 3 because you can make use of MotionPathPugin's convertToPath function and it's completely free! Otherwise MorphSVG is a Club GreenSock plugin so you would have to pay to use it in production. GSAP 3 also has a lot of other improvements like an improved API, smaller file size, and other features like the "<" position parameter value that I used below.

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

 

Sorry swap is not in the docs. And neither is MotionPathPlugin's convertToPath method. We're still working on the docs  

[romain.gr]

Hi Zach, 

 

Great thanks, I was pretty sure that option was available but yes, I couldn't find it in the doc.

 

Thanks again for the quick answer, I couldn't expect less from the GSAP team and users.

 

Here is my version (still using the older gsap and from my original code), I've just added some option so can tweak the animation

 

See the Pen YzXwLvz by romaingranai (@romaingranai) on CodePen