How to build horizontal marquee effects with GSAP

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.

• 

  How to Build a Cursor Hover Effect With JavaScript Mouse Events and GSAP

  

  George Martsoukos

  08 Nov 2021
• 

  Build a JavaScript Page Loading Animation With GSAP

  

  George Martsoukos

  22 Apr 2021
• 

  How to Build a Draggable Image Gallery and a Custom Lightbox With GSAP

  

  George Martsoukos

  16 Sep 2021

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:

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.

• 

  How to Add Adobe After Effects Animations to a Web Page

  

  George Martsoukos

  03 Dec 2020
• 

  How to Build a Coming Soon Page With Lottie Animations

  

  George Martsoukos

  19 May 2021

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!