There's Marquee3K, but this one's 3G.
A Work in Progress™ but it's working.
There's a vanila/non-GSAP version: Marquee3000
If you want to use it in its current state just do the following:
A Marquee's HTML must be structured like:
<div class="marquee">
<!-- You must have only a single container element, you can use any classname -->
<div class="marquee-container">
<!-- Whatever marquee contents you want -->
</div>
</div>If you want to just initialise ALL .marquee or a custom selector:
import Marquee from '/path/to/Marquee3G';
// Note that you must define "gsap" to which one youre using
// either TimelineLite or TimelineMax
Marquee.init({
selector: '.marquee', // default: .marquee
gsap: TimelineLite // required! you must specify which GSAP you're using
});If you want more flexibility then you can also do your own init
import Marquee from '/path/to/Marquee3G';
const marquees = document.querySelectorAll('.marquee');
marquees.forEach(elem => {
const marqueeName = elem.dataset.name;
const marquee = new Marquee({
element: elem, // required! the DOMElement
gsap: TimelineLite, // required!
name: marqueeName // optional: the name of the marquee
});
});
console.log(Marquees);Marquee methods
All marquee instances are stored within a window.Marquees labelled by its index or a custom name if you have specified it in an instance's options when initialised.
For example you have a Marquee named "footer-marquee" then you can just do the following methods when necessary:
// Destroys the marquee and reverts back to original state
Marquees['footer-marquee'].destroy();
// Refreshes the marquee. For example, you change the font size/width of its contents
Marquees['footer-marquee'].refresh(); That's all for now
