How to build horizontal marquee effects with GSAP
New to GSAP? First things first: did you get here 'cause you're curious about GSAP, but don't know exactly what it is? Let's give it a quick overview. So, what is GSAP? GSAP is a JavaScript animation library from GreenSock. You can create high-quality GSAP animations. These will perform well in every browser you're using. There are also GSAP plugins that will help you achieve more, by expanding the GSAP library capabilities. Previous GSAP tutorials In the past, I’ve shown you how to use GSAP to build different effects. From cursor hovers and a page loading GSAP animation to 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 Create horizontal scroll animations with GSAP & ScrollTrigger George Martsoukos 18 Sep 2024 The process You can certainly create a marquee effect in CSS only by animating the transform property. However, in this tutorial, we’ll discuss how to build them using GSAP. This way, we can take advantage of all the extra goodies of this library. In its simplest form, all we need to create marquees with GSAP are the horizontalLoop() and verticalLoop() helper functions. In our case, we’ll only focus on horizontal GSAP marquee animations as they’re more popular. It’s worth noting that a horizontal marquee brings many accessibility challenges. Moving text can be distracting and difficult to read. Consider carefully the kind of content you wish to display in this way! Basic horizontal marquee In the most straightforward implementation, consider the following demo. We'll infinitely animate some logos: The required JavaScript marquee code 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 GSAP marquee items. We do this to prevent the overlapping between the first and last elements. Also, to give them a space that matches 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 horizontal marquee items using JavaScript. In a real-world scenario, we can also put ARIA attributes to improve the 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 HTML marquee effect 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. In this one, we have two horizontal marquee effects that run in opposite directions: Their direction is determined by the value of the data-reversed HTML attribute. So, what makes this demo interesting? 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. We 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 GSAP animations stop when the related html 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. This happens by passing the draggable: true configuration property to the horizontalLoop() function. If you’re a GSAP Premium or Business member, you can make the dragging smoother using the Inertia plugin. As a bonus, the HTML marquee stops each time we hover over an image. At that moment, its corresponding overlay appears with a slide GSAP animation. Once again, resize your browser window to test how the layout changes. There you go, GSAP guru! Hopefully, you enjoyed the GSAP marquees we built. Now you have enough knowledge and inspiration to start building your own. On the other hand, if you'd like to try professionally designed web templates to save you some time, try out an Envato subscription. It gives you access to millions of high-quali
New to GSAP?
First things first: did you get here 'cause you're curious about GSAP, but don't know exactly what it is? Let's give it a quick overview.
So, what is GSAP?
GSAP is a JavaScript animation library from GreenSock. You can create high-quality GSAP animations. These will perform well in every browser you're using.
There are also GSAP plugins that will help you achieve more, by expanding the GSAP library capabilities.
Previous GSAP tutorials
In the past, I’ve shown you how to use GSAP to build different effects. From cursor hovers and a page loading GSAP animation to a draggable image gallery.
How to Build a Cursor Hover Effect With JavaScript Mouse Events and GSAP
Build a JavaScript Page Loading Animation With GSAP
How to Build a Draggable Image Gallery and a Custom Lightbox With GSAP
Create horizontal scroll animations with GSAP & ScrollTrigger
The process
You can certainly create a marquee effect in CSS only by animating the transform property. However, in this tutorial, we’ll discuss how to build them using GSAP. This way, we can take advantage of all the extra goodies of this library.
In its simplest form, all we need to create marquees with GSAP are the horizontalLoop() and verticalLoop() helper functions.
In our case, we’ll only focus on horizontal GSAP marquee animations as they’re more popular.
Basic horizontal marquee
In the most straightforward implementation, consider the following demo. We'll infinitely animate some logos:
The required JavaScript marquee code 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 GSAP marquee items.
We do this to prevent the overlapping between the first and last elements. Also, to give them a space that matches 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 horizontal marquee items using JavaScript. In a real-world scenario, we can also put ARIA attributes to improve the accessibility.
How to Add Adobe After Effects Animations to a Web Page
How to Build a Coming Soon Page With Lottie Animations
Each time we hover over an item, the HTML marquee effect 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. In this one, we have two horizontal marquee effects that run in opposite directions:
Their direction is determined by the value of the data-reversed HTML attribute.
So, what makes this demo interesting? 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. We 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 GSAP animations stop when the related html 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. This happens by passing the draggable: true configuration property to the horizontalLoop() function.
As a bonus, the HTML marquee stops each time we hover over an image. At that moment, its corresponding overlay appears with a slide GSAP animation.
Once again, resize your browser window to test how the layout changes.
There you go, GSAP guru!
Hopefully, you enjoyed the GSAP marquees we built. Now you have enough knowledge and inspiration to start building your own.
On the other hand, if you'd like to try professionally designed web templates to save you some time, try out an Envato subscription. It gives you access to millions of high-quality creative assets that you can use to improve your site.
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!
