Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
cmography

Keep text from moving next to animated text

Question

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>

 

Share this post


Link to post

4 answers to this question

Recommended Posts

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

Share this post


Link to post
  • 0
17 hours ago, tuanphan said:

The problem is due to the width limit.
The solution here is to move drive by to new row, or increase the width of the entire block of text.

That makes sense, thank you!

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...