Kevin Powell - Community•13mo ago

How to stop the animation at the end of the h4.

As you can see in the picure my animation keeps running till over h4. How do i stop this at the end of h4. https://codepen.io/Boeroe/pen/mdaNNwX

Boeroe

CodePen

mdaNNwX

...

9 Replies

dotfortun•13mo ago

Right now the h4 is taking up the entire div.homepage, so if you constrain the h4, the animation will only run the length of the text.

BoeroeOP•13mo ago

How do i constrain h4

dotfortun•13mo ago

My experimenting lead me to this restucture of the html:

<h4 class="textani"><div style="width: max-content;">Frontend Developer</div> <div style="width: max-content;">Blockchain Developer</div></h4>

<h4 class="textani"><div style="width: max-content;">Frontend Developer</div> <div style="width: max-content;">Blockchain Developer</div></h4>

And I gave the .textani selector a width of min-content.

dotfortun•13mo ago

That gives you this:

BoeroeOP•13mo ago

Not working for me

dotfortun•13mo ago

Your codepen isn't quite what I described. This is the change I made to the h4 tag:

<h4 class="textani">
      <div class="title-row">Frontend Developer</div>
      <div class="title-row">Blockchain Developer</div>
</h4>

<h4 class="textani">
      <div class="title-row">Frontend Developer</div>
      <div class="title-row">Blockchain Developer</div>
</h4>

This changes the structure to group each individual line within the h4, so that when we make the CSS changes, they will continue to be lines. And it is supported by adding a width property to the .homepave h4.textani selector:

.homepage h4.textani {
    ...
    width: min-content;
}

.homepage h4.textani {
    ...
    width: min-content;
}

This change constrains the h4 to only be exactly as wide as it needs to be to hold its contents. Finally, we add this CSS rule:

.title-row {
  width: max-content;
}

.title-row {
  width: max-content;
}

This change makes it so each row is at least wide enough to keep all the text on one line. Hope this helps!

BoeroeOP•13mo ago

Thanks a lot. its not really syncin then: https://codepen.io/Boeroe/pen/mdaNNwX

Boeroe

CodePen

mdaNNwX

...

dotfortun•13mo ago

Ooof, yeah. I don't have a good answer for that without resorting to JS.

BoeroeOP•13mo ago

I fixed that @keyframes homeBgText { 0%, 10%, 100% { background-position: -24rem 0; Changed it to -24 instead of -33 Only problem i run into if i change my VS code to the one from codepen its getting messy

Gaming

Programming

How to stop the animation at the end of the h4.