gramazlo

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?

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?