How to get these to line up horizontal and not display on top of each other

JavaScript
#1

The html the code displays successfully. But, I’d like the three spans to line up on one line. When I removed the line breaks, the text overlaps on top of each other. I’d tried sveral things, like renaming each span, wiithout success.

.anim-text-banner {
  font-size: 2vw;
  font-weight: bold;
  white-space: nowrap;
  padding: 100px 50px;
  font-weight: 400;
}

.anim-text-banner > span {
  position: absolute;
  display: inline-block;
  clip: rect(0px, 0px, 300px, 0px);
  color: #000;
}

Here’s the html:

<div class="anim-text-banner">
<span class="anim-text">first text </span>
<br>
<span class="anim-text">second text</span>
<br>
<span class="anim-text">third text </span>
<br>
</div>

And the js:

$(window).on("load", function(e) {
var tlOnLoad = gsap.timeline({delay: 1});
var onLoadTextCount = $(".anim-text-banner>.anim-text").length;
console.log(onLoadTextCount);

for( var i= 1 ; i <= onLoadTextCount ; i++ ){
var onLoadTextWidth = ".anim-text-banner>.anim-text:nth-of-type("+i+")";
tlOnLoad.to(onLoadTextWidth, {clip: "rect(0px, "+$(onLoadTextWidth).width()+"px, 600px, 0px)", ease: "expo.out", duration: 1}, "-=0.2");
}
});

Any help with getting all the spans on one line is appreciated.

#2

Here is a jsfiddle to help others explore the problem.
https://jsfiddle.net/kh7sjbme/

I’m thinking though that CSS seems to be more suited as a solution to the layout problem.

1 Like
#3

If you change the html as below, it displays on one line. Is that what you need or am I missing something?

<div class="anim-text-banner">
<span class="anim-text">first text </span>
<br>
<span class="anim-text">second text</span>
<br>
<span class="anim-text">third text </span>
<br>
<span class="anim-text">first text; second text; third text  </span>
</div>
#4

That’s not what he needs.

He needs to remove the <br> tags, and update the code so that it still looks and works the same.

#5

The problem with clip is that it only works on absolutely placed elements. If you want in-flow elements then you need to use the newer and slightly more complex clip-path property instead.

Here’s a rough demo.

You can do similar things in css without JS but of course can’t be dynamic as such.

This is a demo from an older forum question.

2 Likes
#6

That’s not what he needs.

He needs to remove the <br> tags, and update the code so that it still looks and works the same.

I would like an explanation of that please. I do not see what difference it makes.

#7

Did you look at my first codepen above as the breaks are removed from the last example and the spans do no overlap. :slight_smile:

If you look at Paul’s fiddle with the original code and breaks in place then the effect looks like this.

Screen Shot 2021-05-05 at 15.54.29

As opposed to my version:

Screen Shot 2021-05-05 at 15.57.27

1 Like
#8

@PaulOB yours still has the <br>'s though. Just looked at both your codes. The text with the dark background is my favorite :slight_smile: . Also seen Paul Wilkin’s code, and was trying to find what causes the overlap in his, but couldn’t.

#9

Not on the example in one line.

 <span class="anim-text">first text </span>
  <span class="anim-text">second text</span>
  <span class="anim-text">third text </span>

There are no breaks there.

I explained why they overlap. It’s because they are absolutely positioned and occupy the same position.

The old clip property/value only applies to absolutely positioned elements and is the method being used to reveal the text bit by bit. I changed the script to use clip-path instead which applies to non positioned elements also and therefore the flow of the document is maintained.

3 Likes
#10

clip-path instead which applies to non positioned elements also and therefore the flow of the document is maintained.

So that removes the overlap issue, as you said it applies to non-positioned elements?