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