Text following rectangular path

Hello,

As title says, I want to have moving text that follows a rectangular path/shape and also that overwrites or overlaps all sections/collections I want to have the text go around the entire website.

Any help would be highly appreciated! thank you ❤️

/A

Hmm... interesting. I have not seen an effect like this on an SS site. I don't know if it can be achieved. There is some hope that something like what you want might be done.

Moving Text on a Curved Path

I think a critical bit would be to get an SVG overlay that puts a path around the outside of the viewport content that the text could be animated around. Unlike many SVGs you'd want the width/height to be able to independently scale. I seem to recall there might be some SVG attributes that might allow for this kind of responsiveness.

18 hours ago, creedon said:

Hmm... interesting. I have not seen an effect like this on an SS site. I don't know if it can be achieved. There is some hope that something like what you want might be done.

Moving Text on a Curved Path

I think a critical bit would be to get an SVG overlay that puts a path around the outside of the viewport content that the text could be animated around. Unlike many SVGs you'd want the width/height be able to independently scale. I seem to recall there might be some SVG attributes that might allow for this kind of responsiveness.

Yes, I've had a look on that page but it's not working with what I want, what I need is a text loop that keep repeating outside of the viewport content which is build out of multiple section/collections 😕 Any more information on those attributes could help me out alot!

I've came across this script: A Pen by Malik Dellidj (codepen.io)
But the JS is too complicated for me to reform it into a rectangle + implement it on my site 

Quote

Any more information on those attributes could help me out alot!

Please see preserveAspectRatio. It sounds like a value of none might do the trick if using an SVG to define the path.

10 hours ago, creedon said:

Please see preserveAspectRatio. It sounds like a value of none might do the trick if using an SVG to define the path.

Thanks! I've managed to get the text going on a rectangle path and it's working great. my only issue is that I'm not sure  how I can place the script outside content viewport to be able to have it around the entire page

Quote

I'm not sure  how I can place the script outside content viewport to be able to have it around the entire page

I don't have an specific answer for this one. I would start by trying to make an overlay.