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

Cuberto

Last update: Jan 4, 2023

Related tags

Learning resource reeller

Overview

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({
        container: '.my-reel',
        wrapper: '.my-reel-wrap',
        itemSelector: '.my-reel-item',
        speed: 10,
    });
</script>

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,
});

Option	Type	Default	Description
`container`	`string` \| `HTMLElement`	`null`	Required. Container element or selector.
`wrapper`	`string` \| `HTMLElement`	`null`	Required. Inner element or selector.
`itemSelector`	`string`	`null`	Required. Items CSS selector.
`cloneClassName`	`string`	`-clone`	Class name of the new clones.
`speed`	`number`	`10`	Movement speed.
`ease`	`string`	`'none'`	Timing function. See gsap easing.
`initialSeek`	`number`	`10`	Initial seek of timeline.
`loop`	`boolean`	`true`	Loop movement.
`pause`	`boolean`	`true`	Initialize in paused mode.
`reversed`	`boolean`	`false`	Reverse mode.
`autoStop`	`boolean`	`true`	Use IntersectionObserver to auto stop movement.
`autoUpdate`	`boolean`	`true`	Use ResizeObserver to auto update clones number.
`clonesOverflow`	`boolean`	`true`	Create artificial overflow with clones.
`clonesFinish`	`boolean`	`false`	Bring the cycle of clones to an end.
`clonesMin`	`boolean`	`0`	Minimum number of clones.
`plugins`	`Object`	`null`	Options for plugins. See Plugins section.

API

Methods

Method	Description
`reeller.resume()`	Resumes movement.
`reeller.pause()`	Pauses movement.
`reeller.reverse()`	Reverse movement.
`reeller.invalidate()`	Refresh GSAP Timeline.
`reeller.update()`	Calculates and sets the number of clones and update movement position.
`reeller.refresh(update=true)`	Fully refresh and update all clones and position. Use this only after adding or removing original items.
`reeller.destroy(removeClones=true)`	Destroy Reeller instance, detach all observers and remove clones.
`Reeller.registerGSAP(gsap)`	Static method to register the gsap library.
`Reeller.use(...plugins)`	Static method to register a plugins.

Properties

Property	Type	Description
`reeller.paused`	`boolean`	Indicates that the movement is stopped.
`reeller.tl`	`Timeline`	GSAP Timeline.
`reeller.filler`	`Filler`	Inner Filler instance. See Filler section.
`reeller.options`	`ReellerOptions`	Current Reeller options.
`reeller.plugin`	`Object`	Initialized plugins.

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);

Event	Arguments	Description
`update`	`(reeller, calcData)`	Event will be fired after update.
`refresh`	`(reeller)`	Event will be fired after refresh.
`destroy`	`(reeller)`	Event will be fired after destroy.

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:

Option	Type	Default	Description
`speed`	`number`	`1`	Movement and inertia speed.
`multiplier`	`number`	`0.5`	Movement multiplier.
`threshold`	`number`	`1`	Movement threshold.
`ease`	`string`	`'expo.out'`	Timing function. See gsap easing.
`overwrite`	`boolean`	`true`	See gsap overwrite modes.
`bothDirection`	`boolean`	`true`	Allow movement in both directions.
`reversed`	`boolean`	`false`	Reverse scroll movement.
`stopOnEnd`	`boolean`	`false`	Stop movement on end scrolling.
`scrollProxy`	`function`	`null`	A function that returns the scroll position. Can be used in cases with custom scroll.

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

Option	Type	Default	Description
`container`	`string` \| `HTMLElement`	`null`	Required. Container element or selector.
`itemSelector`	`string`	`null`	Required. Items CSS selector.
`wrapper`	`string` \| `HTMLElement`	`null`	Inner element or selector.
`cloneClassName`	`string`	`'-clone'`	Class name of the new clones.
`autoUpdate`	`boolean`	`true`	Use ResizeObserver to auto update clones number.
`clonesOverflow`	`boolean`	`false`	Create artificial overflow with clones.
`clonesFinish`	`boolean`	`false`	Bring the cycle of clones to an end.
`clonesMin`	`boolean`	`false`	Minimum number of clones.

Methods

Method	Description
`filler.addClones(count, offset=0)`	Creates and adds clones to end in the desired number from given offset.
`filler.removeClones(count)`	Removes the desired number of clones from the end.
`filler.setClonesCount(count)`	Sets the desired number of clones.
`filler.getCalcData()`	Returns a calculated data object (number of clones, widths, etc.)
`filler.update()`	Calculates and sets the number of clones.
`filler.refresh(update=true)`	Fully refresh and update all clones. Use this only after adding or removing original items.
`filler.destroy(removeClones=true)`	Destroy Filler instance, detach all observers and remove clones.

Properties

Property	Type	Description
`filler.container`	`HTMLElement`	Container element.
`filler.wrapper`	`HTMLElement`	Inner element.
`filler.item`	`Array.<HTMLElement>`	Items array.
`filler.calcData`	`Object`	Calculated data (number of clones, widths, etc.).
`filler.options`	`ReellerOptions`	Current Filler options.

Events

Event	Arguments	Description
`update`	`(filler, calcData)`	Event will be fired after update.
`refresh`	`(filler)`	Event will be fired after refresh.
`destroy`	`(filler)`	Event will be fired after destroy.

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)

To understand the history of SACCOs, a Savings and Credit cooperative otherwise known as a Sacco is a type of corporation that aims at pooling money together.

To understand the history of SACCOs, a Savings and Credit cooperative otherwise known as a Sacco is a type of corporation that aims at pooling money together. Depending on the Saccos, there are different types of supplies of merchandise. These include and are not limited to recognition servers, sedimentation, and call home eggs installation. More to these items include check glades, bankers, checks standing orders and safe detentions, and salary progress.

Oct 19, 2022

Marquee is a VS Code extension designed to naturally integrate with your development flow, so that you will no longer lose track of your thoughts while you're coding

Marquee Stay organized with minimal context switching, all inside your Visual Studio Code. Marquee is a VS Code extension designed to naturally integr

Dec 13, 2022

Check if a url is a known route to a next.js application ahead of time

next-known-route Check if a url is a known route to a next.js application ahead of time. https://www.npmjs.com/package/next-known-route Use Case Why d

Jul 17, 2022

An easy to implement marquee JQuery plugin with pause on hover support. I know its easy because even I can use it.

Aug 29, 2022

Search through all stops/stations known by Deutsche Bahn's HAFAS API.

db-stops-search Search through all stops/stations known by Deutsche Bahn's HAFAS API. Formats and imports the stops into a Meilisearch instance. Insta

Oct 4, 2022

Flexible JavaScript library for creating squircley magic ✨

squircley.js squircley.js is the core squirclular magic ✨ from https://squircley.app wrapped up into a simple, 0 dependency JavaScript library. squirc

Dec 24, 2022

Jugglr is a tool for managing test data and running tests with a dedicated database running in a Docker container.

Jugglr Jugglr is a tool for managing test data and running tests with a lightweight, dedicated database. Jugglr enables developers, testers, and CI/CD

Aug 20, 2022

jQuery Tabs Plugin. CSS Tabs with Accessible and Responsive Design. Lot of Tab Themes with Vertical and Horizontal Orientation.

Macaw Tabs Macaw Tabs is jQuery tabs plugin. It helps you to create accessible and responsive jQuery tabs by implementing the W3 design patterns for t

Dec 8, 2022

Easy responsive tabs - is a lightweight jQuery plugin which optimizes normal horizontal or vertical tabs to accordion on multi devices

Easy responsive tabs - is a lightweight jQuery plugin which optimizes normal horizontal or vertical tabs to accordion on multi devices like: web, tablets, Mobile (IPad & IPhone). This plugin adapts the screen size and changes its action accordingly.

Dec 8, 2022

Comments

Options don't work as expected?
My expectations with the following options set are:

The marquee will not be moving when the page loads (paused: true)

If I make the .reel container big enough to fit everything, it will not create any clones and no need to run the marquee (clonesMin:0 and clonesOverflow: false)

When the animation does run via .resume(), it will run backwards (reversed: true)

If I made the container a relative width, I could expand the window and the animation would stop if everything fits (autoStop: true)

None of these things work as expected. As soon as the page loads, it just starts scrolling the marquee, no matter what I change in the options. Am I fundamentally missing something or misunderstanding all the options? Because this library animates really nicely and would seem to fit my needs better than anything else I've found, if I could just get it to work as I'm expecting...

const reeller = new Reeller({ container: '.reel', wrapper: '.reel-wrapper', itemSelector: '.reel-item', clonesMin: 0, clonesOverflow: false, paused: true, reversed: true, autoStop: true })

<div class="reel w-96 rounded border"> <div class="reel-wrapper flex text-sm uppercase"> <div class="reel-item mx-2 flex-none">Lorem</div> <div class="reel-item mx-2 flex-none">ipsum</div> <div class="reel-item mx-2 flex-none">dolor</div> <div class="reel-item mx-2 flex-none">sit</div> <div class="reel-item mx-2 flex-none">amet</div> <div class="reel-item mx-2 flex-none">consectetur</div> <div class="reel-item mx-2 flex-none">adipisicing</div> <div class="reel-item mx-2 flex-none">elit</div> </div> </div>
opened by mepatterson 0

Issue with using the plugin -

Hi, ive followed the instructions to implement, to the T.

I get this message

Uncaught TypeError: Cannot read properties of undefined (reading 'cloneNode')
    at Filler.addClones (index.module.js:183:61)
    at Filler.setClonesCount (index.module.js:216:40)
    at Filler.update (index.module.js:263:10)
    at ResizeObserver.eval (index.module.js:161:14)

My code is quite simple, im calling the function from my app.js. The reeller.js file i have only contains this


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


Reeller.registerGSAP(gsap);

export default function cubertoReeller(){

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

Would appreciate any help you can provide!

Thanks in advance

question

opened by Hjeewa 1

Releases(v0.0.4)

v0.0.4(Aug 22, 2022)
Fix acceleration in ScrollerPlugin (4d73fb0)

Source code(tar.gz)
Source code(zip)
v0.0.3(Aug 22, 2022)
Add margins when calculating data (50de58e)

Bundle tweaks (cfae868)

Docs improvements (a52c6ee) (f7e57c5)

Source code(tar.gz)
Source code(zip)
v0.0.2(Aug 16, 2022)
Fix Reeller separate export (a79d9cc)

Fix Filler naming in calcData (bef2a29)

Set default overflow to container in Reeller (29e9163)

Source code(tar.gz)
Source code(zip)
v0.0.1(Aug 16, 2022)

Pre-release version
Source code(tar.gz)
Source code(zip)