Today we will be taking a look at something that probably also tells us a little bit about my age. What we will be taking a look at is a marquee animation. And in case you don't know what a marquee animation is, well you're probably not as old as I am because there used to be a marquee element that we could use to make exactly this animation. But today we won't be using that deprecated marquee element but we will be exploring how we can recreate this with CSS.
I am absolutely loving this new trend where you see this marquee element pop up in many places right now that I even added it back to my own website. It just looks super beautiful as long as you don't try to hide any useful content in there. So this video will be split into two parts.
In this part we will be taking a look at this text marquee where all the different texts have a different width of course and it means that there is some repetition in the text. However in the second video that will drop next week we will be recreating this logo marquee where there is no repetition in the logos at all yet the marquee still repeats seamlessly. But like I said today we will be starting with the easiest version which is the text marquee.
Let's dive in. Today's starting point will be pretty blank. What you see here is the old-school marquee tool that we used to be able to use and can't use nowadays anymore.
And if we take a look at the browser, you see that the text is still actually moving around. So it is technically still working, but you really shouldn't use this element anymore. Let's remove that right away and let's just start by adding in a new div and we're going to paste in some of these texts.
And of course if we would do that we would see the text and nothing else. Let's add a little bit of CSS. In here you see that we have a wrapper that has some padding, a text color as well as a font size and that's it for now. So that means that we are going to do the following. So first let's add a class name on the marquee and let's call it marquee text in this case.
Then we go back into our CSS and we're quickly going to add a few styles and we're going to target the paragraphs inside of our marquee text element. And in there, we're just going to add a border, a border radius, and a little bit of padding, which already makes it look a little bit better. Next, I also want to position all of the marquee elements on a single line. And for that, we're going to use flexbox. So again, we will target our marquee text element.
And then we're going to add display flex on there. And we're also going to make it a gap of 4.8 rem. And then we see that all the different texts are already on the line and that we also have a little bit of space in between. However, if we would add one more element, you will start to see that we will get a scroll bar. So that's what we're going to prevent first.
And we do that by wrapping it inside of another div, which we're going to call MarqueeTextTrack. Then we go back into the CSS and we're going to target this MarqueeTextTrack as well, because we now need to move this flexbox to the text track, because the paragraphs are now a child of the text track. And this way we can use our MarqueeText element to add an overflow of color. clip so the overflow is not visible anymore.
If you then would go back you see that we of course can't scroll anymore and also don't see the angular text anymore but if we would zoom out if there would be more room we of course will still see. In order to move this marquee the basics for that are pretty simple we can add the CSS keyframe animation that would move everything to the left. So let's start with that.
We're gonna make a new keyframes animation that we are gonna call marquee move text and then we're gonna say transform translate X of minus 100% and if we would then go towards our marquee track and we can say animation marquee move text for example 10 seconds like copiled is already suggesting linear and then infinite if you would do that you already see that we kind of have a marquee element however the first thing you notice is that of course we're getting this really big gap and then all of a sudden it jumps back to the beginning and it just starts over well oh That doesn't really look that beautiful. The trick here, and I'm not a huge fan of doing this, but because there's like dynamic width elements, there isn't really another solution for this that I came across. But there is one for the fixed width elements that you will see in the next video.
But it means that we need to duplicate a few things here. Because if we would go back and we would duplicate these elements, and as soon as we do that, of course we have all of these elements duplicated. So you expect it now to move fully to the end, so we see everything twice.
Yet, that is not what's happening. Look right now. Angular is here and poep, halfway it still jumps back.
And the reason being, if we inspect this, this marquee text track element is not extending to the full width as you can see with the blue square. So if we move it 100%, we're not moving the full width of the content. And that is because we're using flexbox here so the child doesn't extend beyond the width of the parent even though the content overflows.
But we can fix that by going back and then on our text track we can say width is max content. So now we're setting the width of the track to be the width of the content. Meaning that if we would inspect it now you'll also see it's already moving faster.
That the track extends the full width. So now you also notice that we see everything twice. That's of course still not what we want because we want it to loop infinitely. However what if we would for now say animation.
play state cost and then we're going to move it form translate x of minus 50 then in theory you would say if everything is in there twice and we would move it half of the width that we would see the start of the second half which is exactly the same as the first half and you're right if you're thinking that and the fact that you're not seeing it is because we're using the gap property and that flex gap is added in between every element So that means that there is one less gap than we have the number of elements because it's in between each of the elements. We can fix that by going back to our track and also giving it a padding left of 4.8 rem and if we then would again disable the animation then you see what the starting point is and if we would know at transform translate x of minus 50% you notice that it looks like nothing happened. However, if you would move slightly back to 49, 48, you will see that Angular starts to appear, which is the last one of the first half.
And remember, when the animation, even if we played it to 100% got at the end, it immediately flips back to the beginning because it just starts over with the animation that is the default of CSS animations. So what we can do is actually move it to 50% and then let it swap over. So that way, because Both of these states are exactly the same.
It means that you don't see it happening and it looks like it is actually constantly looping. Let's try it. Let's go to our keyframes and let's change it to minus 50% and then we're gonna have a look. There's Angular. Should move all the way to the left out of view and now it should reset.
But we didn't see anything. But you see it's making another round. And that is exactly because it is flipping it halfway and you just don't see it.
Let's prove it. If we go to the app and we change the second one to javascript. There's the javascript and now you should see it flip around because they don't match anymore.
There you go. And this pretty much is the trick if you have dynamic width marquees that you still want to loop. You unfortunately need to have the content duplicated in there.
But for most of these things, that doesn't really matter. Since most of these marquees should only have an aesthetic value, it isn't really a problem to have the content duplicated in there. It could only be a problem for screen readers, which will all of a sudden read everything twice or maybe even five times.
Luckily, we can fix that. We can simply select all. the duplicated content and we can add aria-hidden is true on there.
So this way screen readers will only read the very first element and they won't read the other ones out loud. One important thing to remember though is because we're flipping exactly halfway both of these halves need to be exactly the same. Meaning that if you would want more content you can't have three sets you always need to have an even amount of sets. Because if we would copy this and we would have three sets of everything you will see that all of a sudden it flips at the wrong point and that is because it flips at the halfway point of all of these texts.
And since again, we're using three times the same text, the midpoint is somewhere halfway the second set of words. But you know what would make this look even better? That is if we had some sort of nice fade out happening at the end of the marquee. Let's add a beautiful mask for that too. In CSS, I'm going to add a new class name called fade out horizontal.
So this way we can reuse that class wherever we want. Then the way a fade out mask work is by creating a mask image, which is a linear gradient. And that gradient goes from transparent to black.
And everything that is black will be visible, and everything that's transparent won't be visible. So let's say we create a gradient that goes to the right. It starts at transparent, then it's black at 5rem.
then it stays black until 100% minus 5 rem and finally it gets transparent. So this way we have a linear gradient that is transparent to black for the first 5 rem part and it goes from black to transparent again for the last 50 pixels. Meaning we have these two parts at the edges that are faded out to transparent and if combined with a mask image that will actually be faded out to nothing. So if we take this class name and we would go back and add that onto our marquee text Then nothing has happened.
Oh yeah. Then nothing will happen because I made a typo. It should be transparent of course. And if we then would go back you see that on the edges we have this nice fade out happening and the marquee is nicely fading out.
Beautiful right? So there's two more things I want to show you. I want to show you how you can reverse it meaning that it plays from back to front and if you do that you suddenly get the appearance that the marquee is moving in the other direction.
So by default the animation plays forwards and this forwards is a animation and direction property that is always set to forwards as default but you can also use it as a shorthand inside of the animation itself. So this is the default. However, we can also change that to, for example, reverse. And changing it to reverse already makes the animation play in a different direction.
Pretty cool, right? Then you can just say animation, direction, reverse, and then all of a sudden you can use this extra class to make the marquee move in the opposite direction. However, me personally, I always like to configure these things with CSS variables, so that is actually what I'm going to show you. We could say var direction or forwards because forwards is the default and then you can override this direction by adding backwards to change the direction this way we don't need to have a custom class that we add but we can simply add the CSS variable and especially if you're using tailwind that's actually super easy but since we're not writing any tailwind here we need to do the following we need to add a style tag where we're gonna say direction is reverse and then because I'm using TypeScript here I need to say react.css properties and I mean that's why I like Tailwind so much because I could simply do direction reverse but well not this time. So now if we would copy this marquee and remove the direction of the first one then of course we have the marquee twice.
One moving forwards and the other one moving backwards and as you can see we do have this marquee. And just like we did with the direction, we can also make the speed configurable. You can say var speed or 10 seconds as a default. And then again, you can go in here and you could also define speed and then make it 20 seconds, for example. And as you can see, the second one is moving way slower, but they're still both working perfectly well.
Finally, let's make things a little bit more wild by also rotating our marquees. Let's just create two more classes where we say rotate left is transform rotate minus 12 degrees and also a rotate right which is transform positive 12 degrees. So this way we can go to our marquee and we can say rotate left and the second one we can make rotate right.
And all of a sudden we already have this crisscross marquee. You also see that we need to give our marquee a background color which of course is possible. You can say background color is black. And look at that. All of a sudden we have this super nice looking marquee element that used to be only a single element you create.
And now it was quite a few minutes of explanation. Like always, you will find the code linked down below as well. And make sure to subscribe to this channel because next week I will be uploading another video on Warkies but this time with the logo slider where there will be no repetition in content at all. And that I think is the next step up from this video and is something I am super excited about.
Thank you so much for watching and I will see you in the next video.