golivehq

@Ziggy - That one also only has five words going!! How strange. 

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>

@creedon Finally actually following up on this! Sorry for the wait. Here's my original comment: 

Quote

 

By chance, is there a version of this code that also would work for Blog Post Authors? We have a client that we used this on and it worked great! But in addition to categories and tags, they want author names to appear if someone clicks on an author bio. Let me know! Thank you! 

 

Here is the site: https://www.risenmotherhood.com/ 

Here's a page example of where we have posts from an author, but we'd like to see the author name at the top of the page: https://www.risenmotherhood.com/articles?author=63f9237ac2dafc54936f0890 

We have it working great for categories and tags, shown here: https://www.risenmotherhood.com/articles/category/Disability 

Let me know if this is possible! 

Hey @creedon! By chance, is there a version of this code that also would work for Blog Post Authors? We have a client that we used this on and it worked great! But in addition to categories and tags, they want author names to appear if someone clicks on an author bio. Let me know! Thank you! 

Site URL: https://parrot-roadrunner-h4je.squarespace.com/

Hey! With the new Squarespace Fluid Engine, we are having trouble finding a code that will disable the site-wide animation for just one block. Anyone have any leads on that? 

https://parrot-roadrunner-h4je.squarespace.com/

password: demo 

We're trying to remove the load-in animation on just a few blocks.