Cuberto Reeller

Flexible, powerful and modern library for creating the running horizontal blocks effect, also known as ticker or the «marquee effect».

The library uses GSAP, IntersectionObserver and ResizeObserver to achieve the best performance results.

⚠️ Notice: This library is currently in beta.

Dependencies

GSAP v3 (https://greensock.com/gsap/)

Quick start

Install from NPM

Reeller requires GSAP library to work.

npm install gsap --save
npm install reeller --save

Import GSAP, Reeller and initialize it:

import Reeller from 'reeller';
import gsap from 'gsap';

Reeller.registerGSAP(gsap);

const reeller = new Reeller({
    container: '.my-reel',
    wrapper: '.my-reel-wrap',
    itemSelector: '.my-reel-item',
    speed: 10,
});

Use from CDN

If you don't want to include Reeller files in your project, you can use library from CDN:

<script src="https://unpkg.com/reeller@0/dist/reeller.min.js"></script>

Reeller requires GSAP to work. You need to import it above the Reeller if you didn't have it before:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script src="https://unpkg.com/reeller@0/dist/reeller.min.js"></script>
<script>
    var reeller = new Reeller.Reeller({
        container: '.my-reel',
        wrapper: '.my-reel-wrap',
        itemSelector: '.my-reel-item',
        speed: 10,
    });
</script>

Note: All modules (Reeller, Filler, ScrollerPlugin) will be imported into Reeller namespace when using from CDN, so you must use a prefix.

Options

You can configure Reeller via options.

The following options with defaults is available:

const reeller = new Reeller({
    container: null,
    wrapper: null,
    itemSelector: null,
    cloneClassName: '-clone',
    speed: 10,
    ease: 'none',
    initialSeek: 10,
    loop: true,
    paused: true,
    reversed: false,
    autoStop: true,
    autoUpdate: true,
    clonesOverflow: true,
    clonesFinish: false,
    clonesMin: 0,
});

API

Methods

Properties

Events

Reeller comes with a useful events you can listen. Events can be assigned in this way:

reeller.on('update', () => {
    console.log('Reeller update happened!');
});

You can also delete an event that you no longer want to listen in these ways:

reeller.off('update');
reeller.off('update', myHandler);

Plugins

Reeller support plugins to extend functionality.

At this moment there is only one plugin that comes with the official package: ScrollerPlugin.

This plugin allows you to attach movement to the scroll:

import {Reeller, ScrollerPlugin} from 'reeller';
import gsap from 'gsap';

Reeller.registerGSAP(gsap);
Reeller.use(ScrollerPlugin);

const reeller = new Reeller({
    container: '.my-reel',
    wrapper: '.my-reel-wrap',
    itemSelector: '.my-reel-item',
    speed: 10,
    plugins: {
        scroller: {
            speed: 1,
            multiplier: 0.5,
            threshold: 1,
        },
    },
});

The following options of ScrollerPlugin is available:

In cases with using of custom scroll libraries (e.g. smooth-scrollbar), you can use the scrollProxy option to return the current scroll position:

import Scrollbar from 'smooth-scrollbar';
import {Reeller, ScrollerPlugin} from 'reeller';
import gsap from 'gsap';

Reeller.registerGSAP(gsap);
Reeller.use(ScrollerPlugin);

const scrollbar = Scrollbar.init(document.querySelector('#my-scrollbar'));

const reeller = new Reeller({
    container: '.my-reel',
    wrapper: '.my-reel-wrap',
    itemSelector: '.my-reel-item',
    speed: 10,
    plugins: {
        scroller: {
            speed: 1,
            multiplier: 0.5,
            threshold: 1,
            scrollProxy: () => scrollbar.scrollTop,
        },
    },
});

Filler

Reeller library works on top of the Filler module. This is a separate tool for automatically calculating the number of clones and filling the container with them.

You can use only Filler (without Reeller) if you need to fill the whole space with clones, without movement, animations and GSAP:

import {Filler} from 'reeller';

const filler = new Filler({
    container: '.my-container',
    itemSelector: '.-my-item',
    cloneClassName: '-clone',
});

Options

Methods

Properties

Events

Examples of use

• Cuberto: Leading digital agency.
• Potion: Video email for top sales professionals.
• Weltio: More ways to grow your money.
• WorkJam: Drive Employee Engagement.
• Spendwisor: Make your shopping easier.
• Sleepiest: The Sleepiest App.
• Perform: Unlock workout superpowers.

License

The MIT License (MIT)