Jump to content

7.1 How to achieve scrolling text that doesn't wrap

Recommended Posts

Site URL: https://www.naturelimpact.com/about


I am trying to achieve a scrolling text animation like on this website: https://www.celebratethegoodthings.com/about 

I have tried using the below code but I want the paragraph to stay on one line and not wrap. Does anyone know how I might achieve this? 

My website is https://www.naturelimpact.com/about 

Password: 1

Thank you so much! 


overflow: hidden!important;
 position: relative!important;
 -moz-animation: scroll 15s linear infinite;
 -webkit-animation: scroll 15s linear infinite;
  animation: scroll 15s linear infinite;}
@-moz-keyframes scroll {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }

@-webkit-keyframes scroll  {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }

#page {overflow-x:hidden}


Link to comment
  • Replies 1
  • Views 315
  • Created
  • Last Reply

Top Posters In This Topic

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.