Jump to content

Text following rectangular path

Recommended Posts

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

image0.png

Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
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 

Edited by ashknn
Link to comment
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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
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

Edited by ashknn
Link to comment
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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.