Moving Beyond Marquee: Cool Alternatives to the marquee tag
Tags: webdev, tutorial, html, javascript
Published: 2024-05-19 18:28:56



Remember last time, here in this blog "[https://dev.to/harshitads44217/mothers-day-special-blog-2ack](https://dev.to/harshitads44217/mothers-day-special-blog-2ack)", we discussed how the `<marquee>` tag used to be a top choice for developers in the web development industry? We also discovered that it’s been deprecated for quite a while now. 


But guess what? Marquee-like animations are making a comeback in modern design trends! These are creating seamless scrolling effects.
.


![Marquee like animation in modern design trends](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/paz55zigukrokstrydif.gif)

[- Collection of text-marquee-effect by awwwards.com](https://www.awwwards.com/awwwards_collections/collections/text-marquee-effect/)

I'm back with some cool, alternative ways to create those eye-catching marquee effects without using the deprecated tag. Let's dive in and explore these exciting techniques to implement seamless scrolling effects! 

.
## 1. Using GSAP 😎
.

If you like using JavaScript for the frontend development tasks then GSAP can be  a great tool for you. If you know what it is, then well and good, otherwise let me introduce you to the ultimate modern tool for animation. 

![GSAP Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fugdy6bkfexisdmbaiqi.jpg)

[GSAP Official Website](https://gsap.com/)
[Infinite Marquee GSAP Forum](https://gsap.com/community/forums/topic/35647-infnite-marquee/)

GSAP (GreenSock Animation Platform) is a powerful JavaScript library for creating high-performance animations. It offers robust tools and an easy-to-use API to animate elements with precision and efficiency.

Consider this `HTML` code:- 

```html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GSAP Example</title>
    <style>
        #gsap-marquee {
            margin: 48vh 0;
            white-space: nowrap;
            overflow: hidden;
            box-sizing: border-box;
            width: 100%;
            background-color: teal;
            border-radius: 6px;
            line-height: 2.5em;
            color: white;
            font-size: 48px;
            font-weight: 600;
            font-smooth: always;
        }

        #gsap-marquee span {
            display: inline-block;
            padding-left: 100%;
        }
    </style>
</head>
<body>
    <div id="gsap-marquee">
        <span>This is a scrolling text created with GSAP.</span>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
    <script>
        gsap.to("#gsap-marquee span", {
            xPercent: -100,
            ease: "none",
            duration: 10,
            repeat: -1
        });
    </script>
</body>
</html>


```
In this example, GSAP animates the <span> inside the `#gsap-marquee` container. The text scrolls from right to left, creating a marquee effect. The gsap.to method moves the text by 100% of its width `(xPercent: -100)` over 10 seconds, and this animation repeats `indefinitely (repeat: -1)`. The ease: "none" ensures a constant speed throughout the animation.

.
**Output :-**

![Output of the Marquee effect Implementation using GSAP](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fkhn8ckkspsnbtqk112r.gif)

.
 This setup ensures the text scrolls smoothly and continuously across the screen, mimicking the classic marquee effect with modern animation capabilities.

.
## 2. Using CSS Animation 🤩
.

![CSS Official Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4uhc56yvun6v6dode0m2.png)         <section data-markdown>

Don't underestimate the power of Cascading Style Sheets. CSS alone can make powerful and interactive animations. People who have some hands on over CSS animation know it very well. If you are somewhat skeptical then consider this `HTML` code:-  


```html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Animation Example</title>
    <style>
        .scrolling-text {
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            box-sizing: border-box;
            background-color: deeppink;
            border-radius: 10px;
            color: white;
            margin:48vh 0;
        }

        .scrolling-text span {
            display: inline-block;
                      line-height: 2.5em;
     font-size:48px;
          font-weight:400;
          font-smooth: always;
            padding-left: 100%;
            animation: scroll-left 20s linear infinite;
        }

        @keyframes scroll-left {
            0% {
                transform: translateX(100%);
            }
            100% {
                transform: translateX(-100%);
            }
        }
    </style>
</head>
<body>
    <div class="scrolling-text">
        <span>This is a scrolling text created with CSS animations.</span>
    </div>
</body>
</html>


```
This code creates a scrolling text animation using CSS animations.


.
**Output :-**
.

![Output of the Marquee effect Implementation using CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iktw1aeyxb184nxnotqm.gif)

This code creates a scrolling text animation using CSS animations. Here's how it works. The `div` with class name `scrolling-text` contains a `span` where the intended text is. The desired styling is applied to the div. A deeppink background, white text, rounded corners, and hidden overflow to ensure the text scrolls within the container. The text is styled with a large font size, specific line height, and smooth font rendering. Now here comes a few points to remember:-
.
**CSS Animation:**

- The `span` element is given an `inline-block` display, ensuring it takes up space and aligns correctly.
- The `padding-left: 100%` ensures that the text starts off-screen to the right.
- The `animation: scroll-left 20s linear infinite` applies a keyframes animation called `scroll-left` to the `span` element. This animation lasts for 20 seconds, runs in a linear fashion, and loops infinitely.

**Keyframes Animation:**

- The `@keyframes scroll-left` defines the animation named `scroll-left`.
- `0% { transform: translateX(100%); }` sets the initial position of the text to be completely off-screen to the right.
- `100% { transform: translateX(-100%); }` moves the text to be completely off-screen to the left by the end of the animation.

**How's it happening**

.
- The animation starts with the text positioned off-screen to the `right (transform: translateX(100%))`.
- Over 20 seconds, the text moves horizontally to the `left (transform: translateX(-100%))`, making it appear as if the text is scrolling across the screen.
- Once the text reaches the left side and moves off-screen, the animation restarts, creating an infinite scrolling effect.

.
## 3. Using JavaScript 🙂

.
![JavaScript Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g32maex1ii2ltwfm5uus.jpg)

If you are a fan of using JavaScript in your project then you can consider this implementation might sound interesting to you. Here in this implementation we will be using animation like the last example but by using JavaScript.

Consider this `HTML` code:- 

```html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Scroller Example</title>
    <style>
        #scroll-container {
            white-space: nowrap;
            overflow: hidden;
            width: 100%;
            box-sizing: border-box;
            background-color: royalblue;
            border-radius: 10px;
            color: white;
            margin:48vh 0;
          
        }

        #scroll-text {
            display: inline-block;
            line-height: 2.5em;
            padding-left: 100%;
            font-size:48px;
            font-weight:400;
            font-smooth: always;
        }
    </style>
</head>
<body>
    <div id="scroll-container">
        <div id="scroll-text">This is a scrolling text created with JavaScript.</div>
    </div>

    <script>
        function scrollText() {
            const text = document.getElementById('scroll-text');
            let position = text.offsetLeft;
            function animate() {
                position -= 1;
                if (position < -text.offsetWidth) {
                    position = text.parentElement.offsetWidth;
                }
                text.style.transform = `translateX(${position}px)`;
                requestAnimationFrame(animate);
            }
            animate();
        }

        document.addEventListener('DOMContentLoaded', scrollText);
    </script>
</body>
</html>

```
.
Here JavaScript is used to create a scrolling text effect similar to the `<marquee>` tag. 

**Output :-**

![Output of the Marquee effect Implementation using Javascript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ephr3m84hba337s6xzh.gif)

The `#scroll-container` holds the text and ensures it stays within a defined area. The `#scroll-text` element is positioned within this container and moved continuously from right to left using the animate function. This function updates the position of the text and resets it once it has fully scrolled out of view, creating an infinite scrolling effect. The styling applied ensures the text and container have a visually appealing design with a blue background, white text, and rounded corners as we did in the last example.

.
## 4. Using jQuery 🤔
.


![jQuery Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ea8qd3zy4s228zit51uy.png)
.
It is also a JS implementation but by using a library called jQuery. If you have been working with JS from a while long then must have heard about it somewhere, right? or may be did not. Let me tell you something about it.
.
**A small intro to jQuery:-**
.
This also a JavaScript implementation but using a JS library this time 
jQuery is a popular JavaScript library that simplifies working with web pages.  It makes common tasks like grabbing elements, adding animations, and handling events much easier with shorter code.  This lets developers focus on functionality instead of the nitty-gritty of JavaScript.  It's free, open-source, and used on millions of websites! Launched in 2006, jQuery offered a much simpler way to interact with web pages compared to raw JavaScript. This led to its rapid adoption by developers. A steady rise in jQuery's usage throughout the late 2000s specifically 2006 onwards. By the late 2000s, jQuery had a well-established community, numerous plugins, and a mature codebase. This solidified its position as a dominant web development tool. That was a period of significant influence of jQuery.

This implementation gives an output similar to the previous one but using the jQuery library. Now consider this code :- 

```html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Scroller Example</title>
    <style>
        #scroll-container {
            white-space: nowrap;
            overflow: hidden;
            width: 100%;
            box-sizing: border-box;
            background-color: blue;
            border-radius: 10px;
            color: white;
            margin: 48vh 0;
            line-height: 2.5em;
            font-size: 48px;
            font-weight: 400;
            font-smooth: always;
        }

        #scroll-text {
            display: inline-block;
        }
    </style>
</head>
<body>
    <div id="scroll-container">
        <div id="scroll-text">This is a scrolling text created with jQuery.</div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            var position = $('#scroll-text').offset().left;
            var containerWidth = $('#scroll-container').width();

            function animate() {
                position -= 1;
                if (position < -$('#scroll-text').width()) {
                    position = containerWidth;
                }
                $('#scroll-text').css('transform', 'translateX(' + position + 'px)');
                requestAnimationFrame(animate);
            }

            animate();
        });
    </script>
</body>
</html>

```

.
**See what's happening:-**
.
Using basic jQuery functions and CSS. Here's a brief overview of the key steps:

1. **Initialization:** When the document is ready (`$(document).ready()`), the script initializes. This ensures the DOM is fully loaded before running the script.
2. **Element Selection:** It selects the scrolling text element (`#scroll-text`) and calculates its initial position and the width of its container.
3. **Animation Logic:** The `animate()` function updates the position of the text to create a scrolling effect. When the text scrolls out of view, it resets its position to create a continuous loop.
4. **CSS Transformation:** The code applies a CSS `transform: translateX()` to the text element to move it horizontally.
5.** Frame Rate:** The animation loop continuously runs in sync with the browser's rendering cycle, ensuring smooth animation.

.
**Output :-**
.

![Output of the Marquee effect Implementation using jQuery](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mr2sobncsmfzlzy7enbm.gif)


.
Overall, the script continuously moves the text element horizontally within its container, creating a scrolling effect similar to the traditional marquee tag.


.
## 5. Using jQuery.Marquee Plugin 😏
.


![jQuery.Marquee plugin image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hxcsiv3kwha5wx3nahqc.jpg)

Hope you are aware of the concept of plugin. So in jQuery, plugins are essentially pre-written Javascript code that extend jQuery's functionalities. They provide additional methods that you can use to achieve specific tasks on your web page, often simplifying complex interactions. 

This jQuery plugin under animation category by [AamirAfridi.com](AamirAfridi.com) let's you scroll the text like the old traditional marquee. You can find this plugin [here](https://plugins.jquery.com/marquee/). So let's plug in to jQuery.

.

```html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Marquee Plugin Example</title>
    <style>
        #scroll-container {
            width: 100%;
            overflow: hidden;
            box-sizing: border-box;
            background-color: SlateBlue ;
            border-radius: 10px;
            color: white;
            margin: 48vh 0;
            padding: 10px; /* Add some padding for better visual presentation */
        }

        #scroll-text {
            font-size: 48px;
            font-weight: 400;
            font-smooth: always;
        }
    </style>
</head>
<body>
    <div id="scroll-container">
        <div id="scroll-text">This is a scrolling text created with jQuery Marquee Plugin.</div>
    </div>

    <!-- Include jQuery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <!-- Include jQuery Marquee Plugin -->
    <script src="https://cdn.jsdelivr.net/npm/jquery.marquee/jquery.marquee.min.js"></script>

    <script>
        $(document).ready(function(){
            $('#scroll-text').marquee({
                // Configuration options
                duration: 10000,
                gap: 50,
                delayBeforeStart: 0,
                direction: 'left',
                duplicated: true
            });
        });
    </script>
</body>
</html>

```

After adding the latest version of jQuery and the jQuery Marquee plugin from a CDN the document is ready to add the `marquee()` function and is called on the `#scroll-text` element. The configuration options are set for the marquee, such as `duration`, `gap`, `delayBeforeStart`, `direction`, and `duplicated`.

.
**Output :-**
.

![Output of the Marquee effect Implementation using jQuery Marquee Plugin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v3zbmpn2wxnym4mcdgvb.gif)


.

By using this plugin, you can easily create a scrolling marquee effect with customizable options, making it a simple yet effective solution for adding animations to your web projects. 

There are some similar jQuery plugins out there, that you can try your hands on. One such is [jquery.simplemarquee](https://github.com/IndigoUnited/jquery.simplemarquee)

.
## A Use Case : A CSS Scroll Snap 👌

.
Now, let's play around a use case where we need to show some elements moving from the right to the left. When we want to showcase company names in the partner section or display moving testimonials, we can use CSS Scroll Snap with Automatic Scrolling. Here's a simple implementation using CSS for this use case.

Now consider this code :- 

```html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Scroll Snap with Automatic Scrolling</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }
        .scroll-snap-container {
            display: flex;
            overflow: hidden;
            width: 80%;
            height: 10vh;
            border-radius: 10px;
            background-color: #f5a4d7;
            position: relative;
          
        }
        .scroll-snap-wrapper {
            display: flex;
            width: calc(10 * 100% / 5); /* Two sets of items (5 original + 5 duplicates) */
            animation: scroll 30s linear infinite;
        }
        .scroll-snap-item {
            flex: 1 0 20%; /* Flex-grow: 1, Flex-shrink: 0, Flex-basis: 20% (5 items fit in 100%) */
            text-align: center;
            color: white;
            background: #f5a4d7;
            box-sizing: border-box;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
          font-weight:400;
          font-smooth: always;
          
        }
        .scroll-snap-item img {
            max-width: 25%;
        }
        @keyframes scroll {
            0% { transform: translateX(0); }
            100% { transform: translateX(-100%); }
        }
    </style>
</head>
<body>
    <div class="scroll-snap-container">
        <div class="scroll-snap-wrapper">
            <div class="scroll-snap-item"><img src="https://upload.wikimedia.org/wikipedia/commons/7/7a/Logonetflix.png" alt="Netflix Logo"></div>
            <div class="scroll-snap-item">Item 2</div>
            <div class="scroll-snap-item">Item 3</div>
            <div class="scroll-snap-item">Item 4</div>
            <div class="scroll-snap-item">Item 5</div>
            <div class="scroll-snap-item"><img src="https://upload.wikimedia.org/wikipedia/commons/7/7a/Logonetflix.png" alt="Netflix Logo"></div>
            <div class="scroll-snap-item">Item 2</div>
            <div class="scroll-snap-item">Item 3</div>
            <div class="scroll-snap-item">Item 4</div>
            <div class="scroll-snap-item">Item 5</div>
        </div>
    </div>
</body>
</html>

```

Here we create an automatic scrolling effect using CSS animations combined with the flexbox layout.


- **HTML Structure:**

   - The HTML contains a div with the class `scroll-snap-container`, which acts as the container for the scrolling items.
   - Inside the container, there is another `div` with the class `scroll-snap-wrapper`, which holds multiple `scroll-snap-item` elements.

- **CSS Styling:**

   - The `scroll-snap-container` is styled to have a fixed size, with hidden overflow, rounded corners, and a background color.
   - The `scroll-snap-wrapper` is given a width that is double the container’s width to create a seamless loop (two sets of items), and it uses the scroll keyframes animation to move its content.
   - Each `scroll-snap-item` is styled to be equally distributed within the container, with centered text and images.

- **CSS Animation:**

   - The `@keyframes scroll` defines the animation named `scroll`.
   - `0% { transform: translateX(0); }` sets the initial position of the wrapper to the start.
   - `100% { transform: translateX(-100%); }` moves the wrapper to the left by 100% of its width over the duration of the animation.

- **Animation Mechanism:**

   - The `scroll-snap-wrapper` uses the `scroll` animation to move all items horizontally from right to left continuously.
   - This movement is achieved by setting the wrapper's initial transform to 0% and then moving it to -100% over 10 seconds, creating a looped effect.
.

**Output :-**
.

![Output of the Use case: CSS Scroll Snap](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8nvmww94um5r39uirvxk.gif)

.
**How It Works:**

   - The `scroll-snap-wrapper` contains two sets of items to ensure a seamless loop, moving from right to left over a set duration (10 seconds).
   - The `transform: translateX(-100%)` moves the content of the wrapper from its initial position to the left by 100% of its width, creating a continuous scrolling effect.
   - The `animation: scroll 10s linear infinite` ensures this movement is smooth, consistent, and repeats indefinitely, simulating a marquee-like animation using modern CSS techniques.

.
### Adding another effect: Pause When Hover

And if we add want to pause the animation when we hover over the element we can add this in the style:-

```css
.scroll-snap-wrapper:hover { animation-play-state: paused; }
```

![Use case with pause on hover](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/70wjjoyb8juhvu8kwg4m.gif)

.

## Final Call: The Conclusion 😶‍🌫️🫥😮🤔🤯🫡😜

.
We have explored several alternatives to the traditional `<marquee>` tag, each offering unique advantages and enhanced control for creating scrolling effects. From **CSS animations** and **JavaScript scrollers** to advanced solutions like **GSAP** and **CSS Scroll Snap**, these methods cater to modern web development standards and practices.


![Final Giphy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2asogq1yl05q136iq4pz.gif)
<p><a href="https://giphy.com/gifs/zublime-animation-sandcastle-grayscale-gorilla-ToMjGpplYsUX9WKAxSE">via GIPHY</a></p>

Let me know which method is your favorite! I'll keep sharing examples where marquee-like effects are used efficiently in **contemporary designs**. Your feedback and experiences are invaluable, so please share your preferred method and any insights or stories about working with the `<marquee>` tag. Let's continue this conversation in the comments and inspire each other with **creative scrolling effects**.

Happy coding, and I look forward to reading your thoughts and experiences!

Suggested explorations on the same topic:-

- https://dev.to/harshitads44217/mothers-day-special-blog-2ack
- https://www.jqueryscript.net/demo/Text-Scrolling-Plugin-for-jQuery-Marquee/#google_vignette 
- https://www.upgrad.com/blog/marquee-tag-attributes-in-html-features-uses-examples/
- https://www.geeksforgeeks.org/html-marquee-tag/
- https://blog.logrocket.com/deprecated-html-elements-and-what-to-use-instead/#:~:text=While%20the%20marquee%20tag%20makes,define%20what%20its%20content%20is.
- https://kasp9023.medium.com/what-happened-to-the-marquee-html-element-6ec6782f42ce#:~:text=When%20HTML5%20was%20developed%2C%20W3C%20decided%20to,that%20developers%20would%20not%20use%20the%20element.
- https://www.shiksha.com/online-courses/articles/marquee-tag-in-html-blogId-147137#:~:text=The%20tag%20in%20HTML%20is%20used%20to%20create%20a,moved%20horizontally%20across%20the%20screen.
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee
- https://stackoverflow.com/questions/33102131/jquery-scrolling-text-like-marquee
- https://github.com/aamirafridi/jQuery.Marquee
- https://stackoverflow.com/questions/56522476/how-to-create-a-marquee-using-css-or-javascript