Jump to content

Update to Animated Text HTML & JAVASCRPT

Recommended Posts

Site URL: https://icosahedron-orchid-nxj5.squarespace.com/

Hi, 

I have some animated text on my about page, which I'd like to apply to all pages. It's a series of statements that start with the same characters.

E
Ch
O

I want it to line break after each word, or where I specify. Currently it types out in one line until it hits the section border and wraps.

I'd like it to type out each word on a new line (like below), over 3 lines but line-break tags don't work.

Early <br />
Childhood <br />
Education <br />

Have treid <br>, <Br/> & <br />

Break tags work in the page viewer but not when testing the animation:

<script> is in the header

Code block below:

<section class="sp-intro">
  <h1 class="sp-headline letters type">
    <span class="sp-words-wrapper">
      <b class="is-visible">Early <br>Childhood <br>Organisation</b>
      <b>Embracing <br>Character & <br>Originality</b>
      <b>Encouraging <br>Children to be <br>Open-minded</b>
      <b>Enhancing <br>Childhood <br>Occupations</b>
    </span>
  </h1>
</section>
 

Site password is ECHOTEST.

Any help would be awesome!

Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

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.