How to Build Horizontal Marquee Effects With GSAP

Posted on by

Let me show you how to create infinite marquees with the GSAP JavaScript animation library. This is a common UX pattern I’m sure you’ve seen on plenty of sites.

Previous GSAP Tutorials

In the past, I’ve shown you how to use GSAP to build different effects like cursor hover effects, a page loading animation effect, and a draggable image gallery.

The Process

You can certainly create CSS-only marquees by animating the transform property. However, in this tutorial, we’ll discuss how to build them using GSAP, so we can take advantage of all the extra goodies of this library.

In its simplest form, all we need to create a horizontal and a vertical marquee with GSAP is to use the horizontalLoop() and verticalLoop() helper functions.

In our case, we’ll only focus on horizontal marquees as they’re more popular.

Basic Horizontal Marquee

In the most straightforward implementation, consider the following demo where we infinitely animate some logos:  

The required JavaScript is as follows:

1
 
window.addEventListener("load", function () {

2
 
  horizontalLoop(".marquee-item", {

3
 
    repeat: -1,

4
 
    paddingRight: 40,

5
 
    speed: 0.5,

6
 
  });

7
 
});

Let’s pay attention to the paddingRight configuration property. We use a value that matches the gap (40px) between the marquee items. We do this to prevent the overlapping between the first and last elements and give them a space that matches the space of the other elements. That said, if you put paddingRight: 0, you’ll end up with this result:

The layout if we put don't put paddingRightThe layout if we put don't put paddingRight

Horizontal Marquee With Stops

In this case, each marquee item contains the same text and a Lottie animation. To avoid bloating our HTML, we generate the marquee items using JavaScript. Of course, in a real-world scenario, we can also put ARIA attributes for improving page accessibility.

Each time we hover over an item, the marquee pauses. To achieve this, we use the pause() and play() methods that are available to a GSAP timeline. Scroll down to the footer in this demo to see the effect:

Horizontal Marquees With Reversed Directions

Let’s now work on a more complicated example; consider the following demo, where we have two horizontal marquees that run in opposite directions:

Their direction is determined by the value of the data-reversed HTML attribute.

What makes this demo interesting is that we use GSAP’s matchmedia() method to apply different paddingRight and speed property values depending on the screen size. Be sure to test it by resizing your browser window.

Play Horizontal Marquees When in View

In the following demo, we put GSAP’s ScrollTrigger plugin into play and play the marquees only when they are in view. This way we do our best to ensure that the site visitors will see all our animated items. 

Again, use your browser inspector to test how the animations stop when the related marquee exits the viewport.

Horizontal Marquee Like Slider

In this example, our marquee behaves like a slider. It autoplays, and there are arrows for navigating back and forth. Additionally, we use GSAP’s Draggable plugin to enable drag functionality by passing the draggable: true configuration property to the horizontalLoop() function.  

As a bonus, the marquee stops each time we hover over an image; at that moment, its corresponding overlay appears with a slide animation. 

Once again, resize your browser window to test how the layout changes

Conclusion

Hopefully, you enjoyed the GSAP marquees we built and gained enough knowledge and inspiration to start building your own!

Last but not least, I have added all the demos of this tutorial to a CodePen Collection. Be sure to check it out and give it some love!

As always, thanks a lot for reading!