Jump to content

Keep text from moving next to animated text

Recommended Posts

Site URL: https://agicreative.com/info/team

Site Password: password

I have some animated copy in the banner area on my site and I want to control that the text around it doesn't move with the animated text animates. Essentially, you see "Driven By" move every time the animated text moves to accommodate the spacing. I am hoping that I can make the animated text stay left aligned to keep the "Driven By" static.

Here is the code I am using for the animated text:

<section class="sp-intro">
    <h1 class="sp-headline slide">
      <span>We're a team of image makers, <pbr>driven by <span>
        <span class="sp-words-wrapper">
            <b class="is-visible">creativity.</b>
				<b>Coffee.</b>
				<b>Family.</b>
				<b>Music.</b>
				<b>Tacos.</b>
				<b>Video Games.</b>
				<b>Adventure.</b>
<b>Art.</b>
<b>Science.</b>
<b>Beer.</b>
<b>Nature.</b>
<b>Travel.</b>
<b>Lighting.</b>
<b>Laughter.</b>
<b>Puppies.</b>
<b>Relationships.</b>
<b>Collaboration.</b>
<b>Whiskey.</b>
<b>Technology.</b>
<b>Design.</b>

        </span>
    </h1>
</section>

 

Link to comment
  • Replies 4
  • Views 497
  • Created
  • Last Reply
24 minutes ago, tuanphan said:

Try editing your code


<span>We're a team of image makers, <pbr>driven by <span>

to


<span>We're a team of image makers, <pbr><span style="display:block;">driven by</span> <span>

 

Thank you for this, but unfortunately is just moved the animated text below the other text.

Link to comment

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.