Headline Animation w/ Custom CSS

Hey all,

I am trying to add a "typing" animation to a headline, kind of like SS used to have on its home page, so that a series of words replace each other in a continous rotation to give the impression they were being typed directly on the page (see example here). 

I installed the code, CSS and JavaScript from CodyHouse, which seems to be working in part, but cannot get the animation to actually work and replace each word. This is the page I'm working on.  I think it might be an issue with SquareSpace not running the JavaScript properly but I'm not sure how to fix it. Any ideas? 

The console is showing a lot of errors. 

Without seeing the code it's not possible to give a definite fix but problems often cascade and fixing the first may resolve the rest. 

The thing I think you should first troubleshoot is the Uncaught Syntax error: Unexpected token.  It could be that you have not properly copied the original code into your site and something has been truncated. 

You should also check that you have a line of code to call in jQuery *before* your custom script. 

Fixing those 2 items may well resolve everything, though that's me being optimistic rather than confident. 

Hi @gramazlo. All that Colin is said, I agree with. Understanding you're probably not a developer, you do have a number of things out of place. However, I'm going to venture a guess that if you change these two lines in your code block:

<script src="js/jquery-2.1.1.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->

to these two lines instead:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/CodyHouse/animated-headline/js/main.js"></script>

you'll at least get your animation running. There are a number of other things that appear less-than-optimal about how you've roughly assembled this code -- things that may break on you going forward. So if things still give you trouble, you may consider hiring a developer to help you get things up and running. Note that the use of jsdelivr is to help make this as easy as possible for you, but even that is perhaps not the best approach.

I hope that helps a bit.

-Brandon

Thank you both for looking into this.

I've since managed to make some progress on this page and get a different animation running by implementing the code below:

 <section class="wrapper">
    <h1 class="sentence">We are 
      <div class="slidingVertical">
        <span>Translators.</span>
        <span>Copywriters.</span>
        <span>Editors-at-large.</span>
        <span>Technologists.</span>
        <span><b>LOGOS.</b></span>
      </div>
    </h1>
    </section>
 
 <style>
 /*Body*/
 body{
     background-color: #222;
     font-family: 'Montserrat', sans-serif;
 }
 /*Heading1*/
 h1{
     color: #222;
     font-size: 60px;
     margin-top: 40px;
     text-align: left;
 }
 /*Sentence*/
 .sentence{
      color: #222;
      font-size: 80px;
      text-align: left;
 }
 /*Wrapper*/
 .wrapper{
     background-color: ;
     font-family: 'Montserrat', sans-serif;
     margin: 100px auto;
     padding: 40px 40px;
     position: relative;
     width: 70%;
 }
 
 /*Vertical Sliding*/
 .slidingVertical{
     display: inline;
     text-indent: 12px;
 }
 .slidingVertical span{
     animation: topToBottom 12.5s linear infinite 0s;
     -ms-animation: topToBottom 12.5s linear infinite 0s;
     -webkit-animation: topToBottom 12.5s linear infinite 0s;
     color: #FFC300;
     opacity: 0;
     overflow: hidden;
     position: absolute;
 }
 .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;
 }
 
 /*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>

 However, I can't seem to get the original typing animation to work here. This is the CSS from CodyHouse I was working with:

.cd-headline.type .cd-words-wrapper {
  vertical-align: top;
  overflow: hidden;
}
.cd-headline.type .cd-words-wrapper::after {
  /* vertical bar */
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  height: 90%;
  width: 1px;
  background-color: #aebcb9;
}
.cd-headline.type .cd-words-wrapper.waiting::after {
  -webkit-animation: cd-pulse 1s infinite;
  -moz-animation: cd-pulse 1s infinite;
  animation: cd-pulse 1s infinite;
}
.cd-headline.type .cd-words-wrapper.selected {
  background-color: #aebcb9;
}
.cd-headline.type .cd-words-wrapper.selected::after {
  visibility: hidden;
}
.cd-headline.type .cd-words-wrapper.selected b {
  color: #0d0d0d;
}
.cd-headline.type b {
  visibility: hidden;
}
.cd-headline.type b.is-visible {
  visibility: visible;
}
.cd-headline.type i {
  position: absolute;
  visibility: hidden;
}
.cd-headline.type i.in {
  position: relative;
  visibility: visible;
}

@-webkit-keyframes cd-pulse {
  0% {
    -webkit-transform: translateY(-50%) scale(1);
    opacity: 1;
  }
  40% {
    -webkit-transform: translateY(-50%) scale(0.9);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(-50%) scale(0);
    opacity: 0;
  }
}
@-moz-keyframes cd-pulse {
  0% {
    -moz-transform: translateY(-50%) scale(1);
    opacity: 1;
  }
  40% {
    -moz-transform: translateY(-50%) scale(0.9);
    opacity: 0;
  }
  100% {
    -moz-transform: translateY(-50%) scale(0);
    opacity: 0;
  }
}
@keyframes cd-pulse {
  0% {
    -webkit-transform: translateY(-50%) scale(1);
    -moz-transform: translateY(-50%) scale(1);
    -ms-transform: translateY(-50%) scale(1);
    -o-transform: translateY(-50%) scale(1);
    transform: translateY(-50%) scale(1);
    opacity: 1;
  }
  40% {
    -webkit-transform: translateY(-50%) scale(0.9);
    -moz-transform: translateY(-50%) scale(0.9);
    -ms-transform: translateY(-50%) scale(0.9);
    -o-transform: translateY(-50%) scale(0.9);
    transform: translateY(-50%) scale(0.9);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(-50%) scale(0);
    -moz-transform: translateY(-50%) scale(0);
    -ms-transform: translateY(-50%) scale(0);
    -o-transform: translateY(-50%) scale(0);
    transform: translateY(-50%) scale(0);
    opacity: 0;
  }
}

Any suggestions? 

Hi @gramazlo. Are you asking for help with the "new-new-page" or the original "new-page". On the NP, you have JQuery added twice. Explore removing it from the site-wide header code injection of the page-specific code injection unless you're using it elsewhere on the site. If you're using it elsewhere you're going to have to do what we call "refactoring"...spend time reconsidering/rewriting how you're solving each problem individually and come up with a new solution that solves multiple problems in combination. If you don't get additional replies here that solve your problem, it may be time to consider hiring a developer.

Can you embed a .jpg or .png as your headline?