Recreating Marquee Loop Animation with CSS
Back in 2013 was when I first came across the <marquee> tag as my computer teacher taught it to us as part of our HTML class in 7th grade. If you haven’t heard about it, it is an HTML tag that was used to insert a “scrolling area of text” as MDN defines it. Basically <marquee> moved the text from one end of screen to the other continuously in a loop.
This feature is now deprecated and hence should no longer be used but we can always recreate the loop animation using CSS!
In this article, I will guide you on how we can recreate marquee with CSS and also take it a step ahead!
HTML
First, inside a <section> tag with class “container”, I’ve taken a paragraph tag(<p>). You may also use any of the heading tags. A class named “marquee-text” is assigned to the <p> tag.
<section class="container">
<p class="marquee-text">marquee</p>
</section>CSS
For “container”, position: relative property is added to place “marquee-text” <p> tag easily inside it with the help of position: absolute property.
Absolutely positioned elements place themselves relative to closest ancestor with position property other than static.
Clamp() CSS function : This function accepts 3 parameters— a minimum value, a preferred value and a maximum value. It returns the middle value if it lies within the range defined by minimum and maximum values.
Clamp() is a great way to define fluid font-sizes that grow or shrink with the viewport width without using media queries. I’ve used clamp() to define height for “container” and font-size for “marquee-text”. Middle value for both is written using vw unit which means viewport width.
Suppose we are viewing this on a tablet with a width of 768px then 8vw font-size equals to 8% of 768px = 60px approximately. As long as this value lies within the range, clamp() will always return this preferred value making it easier to make responsive layouts with a single line of code.
.container {
position: relative;
height: clamp(3em, 10vw, 6em);
overflow: hidden;
}
.marquee-text {
position: absolute;
font-size: clamp(2.5rem, 8vw, 5.5rem);
font-family: sans-serif;
text-transform: uppercase;
font-weight: 700;
} This is how “container” and “marquee-text” look like after the styling. “container” spans across the whole screen because by default <section> tag being a block element has width of 100%.
Adding Animation
I need to now make this “marquee-text” move from right-end of “container” towards left-end in a loop. For this I will use a combination of left property and transform: translateX() property.
left property is used on elements with position property to move them along x-axis. For absolutely positioned elements like “marquee-text” in our example, left: 100% is used to move the <p> tag all the way to the right-end of parent element which is “container” for this code snippet.
transform: translateX() property also moves an element along the x-axis. One major advantage of using this property is that when applied using percentage units as values, it calculates the x-axis position relative to the element’s size itself and not the parent element’s size.
Therefore, when I apply transform: translateX(-100%) to “marquee-text”, this property moves the <p> tag all the way to the left-end.
Now that I have both the start and end state for the animation, we will define it using @keyframes property as below.
.marquee-text {
animation: marquee 7s infinite linear;
}
@keyframes marquee {
0% {
left: 100%;
}
100% {
left: 0;
transform: translateX(-100%);
}
}With this our marquee loop animation is complete!
Let’s take it a bit further and create an infinite text loop animation!
Creating Infinite Text Loop Animation
HTML
We will start off in the same way by defining a <section> tag for “container” which will hold 3 paragraph tags with some content and a class named “loop-text”.
<section class="container">
<p class="loop-text">this is continuous text</p>
<p class="loop-text">this is continuous text</p>
<p class="loop-text">this is continuous text</p>
</section>CSS
Here we won’t use position property but Flexbox to place all the 3 <p> tags inside “container”. Just use display: flex property inside “container” and all the <p> tags align themselves in a row.
white-space property specifies how the white-spaces within content is handled. I don’t want the paragraphs to wrap into new lines and so white-space: nowrap acts as a savior.
.container {
display: flex;
white-space: nowrap;
width: 100%;
height: clamp(3em, 10vw, 6em);
overflow: hidden;
font-family: sans-serif;
}
.loop-text {
font-size: clamp(2.5rem, 8vw, 5.5rem);
text-transform: uppercase;
font-weight: 700;
padding: 0 0.25em;
}Adding Animation
To get a loop animation, I just need to move each <p> tag towards left by its own width from its initial position. For this, I will again use transform: translateX() property setting it with value as 0 for initial position and -100% for the final position.
.loop-text {
animation: loopText 5s infinite linear;
}
@keyframes loopText {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}and so our infinite text loop animation is done and looks good!
Conclusion
In this article, we learnt about the transform translate property and how it can be used to recreate the famous <marquee> loop animation. We also looked at how clamp() lets us define responsive font-sizes with just a single CSS declaration without needing to use media queries.
That’s it for this article. Thank you for reading!! 😊
If you found this article helpful, please click the clap 👏button and feel free to comment down your feedbacks!! I would love to read them and improve. For more content around CSS you can also follow me on Twitter.
