infinite-marquee

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

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

OR

@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 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
})

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.

• Images - imagesloaded
• Fonts - fontfaceobserver