Infinite-marquee NPM

Infinite Marquee

Configurable package to create an infinite marquee effect. Animated with either CSS or JS.

Installation

npm i infinite-marquee
# or
yarn add infinite-marquee

Basic Usage

Basic Demo

HTML

<div class="marquee">
  <div class="marquee-inner">
    <div class="marquee-content">EXAMPLE</div>
  </div>
</div>

CSS - Add the base styles to your CSS file.

infinite-marquee.css

@import 'infinite-marquee/assets/css/infinite-marquee

Zero Config

import InfiniteMarquee from 'infinite-marquee'

new InfiniteMarquee()

Options

Option	Type	Default	Description
`el`	`HTMLElement`	`document.querySelector('.marquee')`	Container element.
`direction`	`string`	`left`	Animation direction.
`duration`	`number`	`5`	Animation duration in seconds.
`css`	`boolean`	`true`	Whether to animate using CSS. If false GSAP will be used.
`disableResize`	`boolean`	`false`	Disable internal window resize event so an external one can be used.

Methods

Method	Description
`onResize`	Call the internal resize method.
`update`	Recaculate DOM.

Properties

Method	Description
`animation`	With `{css: false}` this will return a GSAP fromTo instance that can be controlled using all of GSAPs methods.

Advanced Usage

Options Demo

Options Example

<div class="marquee my-marquee">
    <div class="marquee-inner">
        <div class="marquee-content">
            EXAMPLE
        </div>
    </div>
</div>

import InfiniteMarquee from 'infinite-marquee'

new InfiniteMarquee({
  el: document.querySelector('.my-marquee'),
  direction: 'right',
  duration: 5,
  css: false
})

Usage with external window resize

For if you would like to batch resizes using an external resize event.

⚠️ I recommend using a debounce on an external resize to maximise performance. Internally this package uses the lodash debounce utility.

import InfiniteMarquee from 'infinite-marquee'

const marquee = new InfiniteMarquee({
  disableResize: true
})

window.addEventListener(
  'resize',
  () => {
    marquee.onResize()
  },
  { passive: true }
)

Notes

⚠️ If your content DOM is modified after load e.g. fonts, images being lazyloaded. Please look into initialising your instance after these have loaded OR calling the update method to recalculate the marquee. Below are some package recommendations that might help with this.