Infinite Marquee with Vevet.js

Do you remember your first projects?

My first one was a school website. I was such a newbie trying to use every single HTML tag I discovered.

I still remember adding about ten <marquee> elements on one page - and all surrounded by flashing GIFs. Once, my friend told me, "Normal people can't use your website."

He was right.

But still, marquees and other similar animations are popular nowadays.

There are tons of pure CSS and JS marquee demos across the web. Nevertheless, I'd like to share my own approach to building a custom Marquee using Vevet.js.

Disclaimer:

Vevet.js is a collection of abstract tools for creative front-end development. Marquee is a part of this ecosystem.

Let's code!

Step 1. Install the library:

npm i vevet

Step 2. Write some HTML:

<div id="marquee">Breaking News🔥</div>

Step 3. Copy and paste this JavaScript code:

import { Marquee } from "vevet";

new Marquee({
  container: document.getElementById("marquee")
});

And there you have it!
Here's a basic demo:

But that's just the tip of the iceberg. Vevet Marquee contains really useful features. Here are some of them:

Cloning nodes on demand

This feature is enabled by default, but you can easily disable it whenever you like:

Custom speed and gap

It's not just about numbers! The Marquee supports CSS units, so you can use values like gap: "2rem" or speed: "1vw" - it will just work:

Hover pause

No explanation needed:

Responsiveness

There's a handy tool called Responsive that allows you to change marquee properties at specific breakpoints:

Control

There's no use in any utility unless you can control it. The Marquee can be paused or played:

Made draggable:

Or scrollable:

I hope this serves as a nice alternative for some of you.

You can find documentation here

or browse live demos, which might be even more helpful.