Jump to content

Headline Animation w/ Custom CSS

Recommended Posts

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? 

Link to comment
  • Replies 5
  • Views 1.7k
  • Created
  • Last Reply

The console is showing a lot of errors. 

image.png.441b955efb2dfd3c840a180094775be2.png

 

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. 

I'm Colin Irwin aka silvabokis.  I've been a Squarespace designer & developer since 2013. 
I remember when it was all wild prairies round these here parts. 🐃🤠
Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written.
That reminds me.. ..you might want to check out my
Squarespace template finder or have a look at my other Squarespace tips
Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. 
If you're looking for a Squarespace developer 
Book a chat or Drop me a line - first meeting is always free  

 

Link to comment

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

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Link to comment

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? 

Link to comment

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.

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Link to comment
  • 4 weeks later...

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.