Let me present you the right 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 right 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 actually create CSS-only marquees by animating the rework property. Nonetheless, on this tutorial, we’ll focus on the right way to construct them utilizing GSAP, so we are able to reap the benefits of all the additional goodies of this library.
In its easiest type, all we have to create a horizontal and a vertical marquee with GSAP is to make use of the horizontalLoop() and verticalLoop() helper features.
In our case, we’ll solely deal with horizontal marquees as they’re extra widespread.
Fundamental Horizontal Marquee
In probably the most simple implementation, think about the next demo the place we infinitely animate some logos:
The required JavaScript is as follows:
1 |
window.addEventListener("load", perform () { |
2 |
horizontalLoop(".marquee-item", { |
3 |
repeat: -1, |
4 |
paddingRight: 40, |
5 |
pace: 0.5, |
6 |
});
|
7 |
});
|
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 stop the overlapping between the primary and final components and provides them an area that matches the house of the opposite components. That stated, in case you put paddingRight: 0, you’ll find yourself with this consequence:
Horizontal Marquee With Stops
On this case, every marquee merchandise incorporates 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 situation, we are able to additionally put ARIA attributes for bettering web page accessibility.
Every time we hover over an merchandise, the marquee pauses. To realize this, we use the pause() and play() strategies which are accessible to a GSAP timeline. Scroll all the way 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 now have 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() technique to use completely different paddingRight and pace property values relying on the display dimension. Remember to check 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 format adjustments
Conclusion
Hopefully, you loved the GSAP marquees we constructed and gained sufficient data and inspiration to begin constructing your individual!
Final however not least, I’ve added all of the demos of this tutorial to a CodePen Collection. Remember to test it out and provides it some love!
As at all times, thanks quite a bit for studying!
