Blog

Let me present you the way to create infinite marquees with the GSAP JavaScript animation library. This can be a widespread UX sample I’m positive you’ve seen on loads of websites.

Earlier GSAP Tutorials

Previously, I’ve proven you the way to use GSAP to construct completely different results like cursor hover results, a web page loading animation impact, and a draggable picture gallery.

The Course of

You possibly can definitely create CSS-only marquees by animating the remodel property. Nevertheless, on this tutorial, we’ll talk about the way to construct them utilizing GSAP, so we are able to make the most of all the additional goodies of this library.

In its easiest kind, all we have to create a horizontal and a vertical marquee with GSAP is to make use of the horizontalLoop() and verticalLoop() helper capabilities.

In our case, we’ll solely deal with horizontal marquees as they’re extra common.

Fundamental Horizontal Marquee

In essentially the most easy implementation, think about the next demo the place we infinitely animate some logos:  

The required JavaScript is as follows:

Let’s take note of the paddingRight configuration property. We use a price that matches the hole (40px) between the marquee objects. We do that to forestall the overlapping between the primary and final components and provides them an area that matches the area of the opposite components. That mentioned, for those who put paddingRight: 0, you’ll find yourself with this outcome:

Horizontal Marquee With Stops

On this case, every marquee merchandise comprises the identical textual content and a Lottie animation. To keep away from bloating our HTML, we generate the marquee objects utilizing JavaScript. In fact, in a real-world state of affairs, we are able to additionally put ARIA attributes for bettering web page accessibility.

Every time we hover over an merchandise, the marquee pauses. To attain this, we use the pause() and play() strategies which can be accessible to a GSAP timeline. Scroll right down to the footer on this demo to see the impact:

Horizontal Marquees With Reversed Instructions

Let’s now work on a extra sophisticated instance; think about the next demo, the place we’ve got two horizontal marquees that run in reverse instructions:

Their route is decided by the worth of the data-reversed HTML attribute.

What makes this demo fascinating is that we use GSAP’s matchmedia() methodology to use completely different paddingRight and pace property values relying on the display screen measurement. You should definitely take a look at it by resizing your browser window.

Play Horizontal Marquees When in View

Within the following demo, we put GSAP’s ScrollTrigger plugin into play and play the marquees solely when they’re in view. This manner we do our greatest to make sure that the location guests will see all our animated objects. 

Once more, use your browser inspector to check how the animations cease when the associated marquee exits the viewport.

Horizontal Marquee Like Slider

On this instance, our marquee behaves like a slider. It autoplays, and there are arrows for navigating backwards and forwards. Moreover, we use GSAP’s Draggable plugin to allow drag performance by passing the draggable: true configuration property to the horizontalLoop() perform.  

As a bonus, the marquee stops every time we hover over a picture; at that second, its corresponding overlay seems with a slide animation. 

As soon as once more, resize your browser window to check how the structure modifications

Conclusion

Hopefully, you loved the GSAP marquees we constructed and gained sufficient information and inspiration to begin constructing your individual!

Final however not least, I’ve added all of the demos of this tutorial to a CodePen Assortment. You should definitely test it out and provides it some love!

As at all times, thanks quite a bit for studying!