Jump to content

Animated Rotating Text Troubleshooting

Recommended Posts

Hey friends!! 

We are trying to get the animated text scrolling effect for a client's site that has 12 words in the phrase. We are SO close, but something goes wonky after the 5th entry, and it start to overlap. Is anyone able to help us figure out what we are missing? 

 

LINK: https://smiley-poswolsky-golive.squarespace.com/scrolling-words-test

password: golive 

Code we are using: 

 <section class="wrapper">
    <h2 class="sentence">    
      <div class="slidingVertical">
        <span>Work.</span>
        <span>Leadership.</span>
        <span>Innovation.</span>
        <span>HR.</span>
        <span>Culture.</span>
        <span>L&D.</span>
        <span>Employee Experience.</span>
        <span>Well-Being</span>
        <span>Customer Service.</span>
        <span>Sales.</span>
        <span>Meetings.</span>
        <span>Business.</span>
      </div>
    </h2>
    </section>
 
 <style>
 /*Vertical Sliding*/
 .slidingVertical{
     display: inline;
 }
 .slidingVertical span{
     animation: topToBottom 12.5s infinite 0s;
     -ms-animation: topToBottom 12.5s infinite 0s;
     -webkit-animation: topToBottom 12.5s infinite 0s;
     color: black;
     opacity: 0;
     overflow: hidden;
     position: absolute;
 }
.slidingVertical span:nth-child(1){
     animation-delay: 0s;
     -ms-animation-delay: 0s;
     -webkit-animation-delay: 0s;
 }
 .slidingVertical span:nth-child(2){
     animation-delay: 2.5s;
     -ms-animation-delay: 2.5s;
     -webkit-animation-delay: 2.5s;
 }
 .slidingVertical span:nth-child(3){
     animation-delay: 5s;
     -ms-animation-delay: 5s;
     -webkit-animation-delay: 5s;
 }
 .slidingVertical span:nth-child(4){
     animation-delay: 7.5s;
     -ms-animation-delay: 7.5s;
     -webkit-animation-delay: 7.5s;
 }
 .slidingVertical span:nth-child(5){
     animation-delay: 10s;
     -ms-animation-delay: 10s;
     -webkit-animation-delay: 10s;
 }
    .slidingVertical span:nth-child(6){
     animation-delay: 12.5s;
     -ms-animation-delay: 12.5s;
     -webkit-animation-delay: 12.5s;
 }
   .slidingVertical span:nth-child(7){
     animation-delay: 15s;
     -ms-animation-delay: 15s;
     -webkit-animation-delay: 15s;
 }
 .slidingVertical span:nth-child(8){
     animation-delay: 17.5s;
     -ms-animation-delay: 17.5s;
     -webkit-animation-delay: 17.5s;
 }
 .slidingVertical span:nth-child(9){
     animation-delay: 20s;
     -ms-animation-delay: 20s;
     -webkit-animation-delay: 20s;
 }
 .slidingVertical span:nth-child(10){
     animation-delay: 22.5s;
     -ms-animation-delay: 22.5s;
     -webkit-animation-delay: 22.5s;
 }
    .slidingVertical span:nth-child(11){
     animation-delay: 25s;
     -ms-animation-delay: 25s;
     -webkit-animation-delay: 25s;
 }
       .slidingVertical span:nth-child(12){
     animation-delay: 27.5s;
     -ms-animation-delay: 27.5s;
     -webkit-animation-delay: 27.5s;
 }
 
 /*topToBottom Animation*/
 @-moz-keyframes topToBottom{
     0% { opacity: 0; }
     5% { opacity: 0; -moz-transform: translateY(-50px); }
     10% { opacity: 1; -moz-transform: translateY(0px); }
     25% { opacity: 1; -moz-transform: translateY(0px); }
     30% { opacity: 0; -moz-transform: translateY(50px); }
     80% { opacity: 0; }
     100% { opacity: 0; }
 }
 @-webkit-keyframes topToBottom{
     0% { opacity: 0; }
     5% { opacity: 0; -webkit-transform: translateY(-50px); }
     10% { opacity: 1; -webkit-transform: translateY(0px); }
     25% { opacity: 1; -webkit-transform: translateY(0px); }
     30% { opacity: 0; -webkit-transform: translateY(50px); }
     80% { opacity: 0; }
     100% { opacity: 0; }
 }
 @-ms-keyframes topToBottom{
     0% { opacity: 0; }
     5% { opacity: 0; -ms-transform: translateY(-50px); }
     10% { opacity: 1; -ms-transform: translateY(0px); }
     25% { opacity: 1; -ms-transform: translateY(0px); }
     30% { opacity: 0; -ms-transform: translateY(50px); }
     80% { opacity: 0; }
     100% { opacity: 0; }
 }
 </style>

 

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

Top Posters In This Topic

Popular Days

Top Posters In This Topic

It looks like your main amimation length is set to 12.5s but because there are 12 pieces of text with up to 27.5s of delay it is restarting the first one after 12.5s and you are getting an overlap. I would try increasing that first value to 30s and see if that's better.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.