reeller
Version:
Flexible, powerful and modern library for creating the running horizontal blocks effect, also known as ticker or the «marquee effect».
310 lines • 8.11 kB
TypeScript
export default class Reeller extends Base {
/**
* @typedef {Object} ReellerOptions
* @property {string|HTMLElement|null} container Container element or selector.
* @property {string|HTMLElement|null} wrapper Inner element or selector.
* @property {string|null} itemSelector Items CSS selector.
* @property {string} [cloneClassName] Class name of the new clones.
* @property {number} [speed] Movement speed.
* @property {string} [ease] Timing function.
* @property {number} [initialSeek] Initial seek of timeline.
* @property {boolean} [loop] Loop movement.
* @property {boolean} [paused] Initialize in paused mode.
* @property {boolean} [reversed] Reverse mode.
* @property {boolean} [autoStop] Use IntersectionObserver to auto stop movement.
* @property {boolean} [autoUpdate] Use ResizeObserver to auto update clones number.
* @property {boolean} [clonesOverflow] Create artificial overflow with clones.
* @property {boolean} [clonesFinish] Bring the cycle of clones to an end.
* @property {boolean} [clonesMin] Minimum number of clones.
* @property {Object|null} [plugins] Options for plugins.
*/
/**
* Default options.
*
* @type {ReellerOptions}
*/
static defaultOptions: {
/**
* Container element or selector.
*/
container: string | HTMLElement | null;
/**
* Inner element or selector.
*/
wrapper: string | HTMLElement | null;
/**
* Items CSS selector.
*/
itemSelector: string | null;
/**
* Class name of the new clones.
*/
cloneClassName?: string;
/**
* Movement speed.
*/
speed?: number;
/**
* Timing function.
*/
ease?: string;
/**
* Initial seek of timeline.
*/
initialSeek?: number;
/**
* Loop movement.
*/
loop?: boolean;
/**
* Initialize in paused mode.
*/
paused?: boolean;
/**
* Reverse mode.
*/
reversed?: boolean;
/**
* Use IntersectionObserver to auto stop movement.
*/
autoStop?: boolean;
/**
* Use ResizeObserver to auto update clones number.
*/
autoUpdate?: boolean;
/**
* Create artificial overflow with clones.
*/
clonesOverflow?: boolean;
/**
* Bring the cycle of clones to an end.
*/
clonesFinish?: boolean;
/**
* Minimum number of clones.
*/
clonesMin?: boolean;
/**
* Options for plugins.
*/
plugins?: any | null;
};
/**
* Registered plugin storage.
*
* @type {Object}
*/
static plugins: any;
/**
* Register GSAP animation library.
*
* @param {GSAP} gsap GSAP library.
*/
static registerGSAP(gsap: GSAP): void;
/**
* Register plugins.
*/
static use(...plugins: any[]): void;
/**
* Create Reeller instance.
*
* @param {ReellerOptions} [options] Reeller options.
*/
constructor(options?: {
/**
* Container element or selector.
*/
container: string | HTMLElement | null;
/**
* Inner element or selector.
*/
wrapper: string | HTMLElement | null;
/**
* Items CSS selector.
*/
itemSelector: string | null;
/**
* Class name of the new clones.
*/
cloneClassName?: string;
/**
* Movement speed.
*/
speed?: number;
/**
* Timing function.
*/
ease?: string;
/**
* Initial seek of timeline.
*/
initialSeek?: number;
/**
* Loop movement.
*/
loop?: boolean;
/**
* Initialize in paused mode.
*/
paused?: boolean;
/**
* Reverse mode.
*/
reversed?: boolean;
/**
* Use IntersectionObserver to auto stop movement.
*/
autoStop?: boolean;
/**
* Use ResizeObserver to auto update clones number.
*/
autoUpdate?: boolean;
/**
* Create artificial overflow with clones.
*/
clonesOverflow?: boolean;
/**
* Bring the cycle of clones to an end.
*/
clonesFinish?: boolean;
/**
* Minimum number of clones.
*/
clonesMin?: boolean;
/**
* Options for plugins.
*/
plugins?: any | null;
});
/** @type {ReellerOptions} **/
options: {
/**
* Container element or selector.
*/
container: string | HTMLElement | null;
/**
* Inner element or selector.
*/
wrapper: string | HTMLElement | null;
/**
* Items CSS selector.
*/
itemSelector: string | null;
/**
* Class name of the new clones.
*/
cloneClassName?: string;
/**
* Movement speed.
*/
speed?: number;
/**
* Timing function.
*/
ease?: string;
/**
* Initial seek of timeline.
*/
initialSeek?: number;
/**
* Loop movement.
*/
loop?: boolean;
/**
* Initialize in paused mode.
*/
paused?: boolean;
/**
* Reverse mode.
*/
reversed?: boolean;
/**
* Use IntersectionObserver to auto stop movement.
*/
autoStop?: boolean;
/**
* Use ResizeObserver to auto update clones number.
*/
autoUpdate?: boolean;
/**
* Create artificial overflow with clones.
*/
clonesOverflow?: boolean;
/**
* Bring the cycle of clones to an end.
*/
clonesFinish?: boolean;
/**
* Minimum number of clones.
*/
clonesMin?: boolean;
/**
* Options for plugins.
*/
plugins?: any | null;
};
gsap: any;
paused: boolean;
/**
* Create filler.
*/
createFiller(): void;
filler: Filler;
/**
* Create timeline.
*/
createTimeline(): any;
tl: any;
/**
* Bind IntersectionObserver to container for autoplay.
*/
bindIntersectionObserver(): void;
intersectionObserver: IntersectionObserver;
/**
* Init plugins from options.
*/
initPlugins(): void;
plugin: {};
/**
* Destroy initialized plugins.
*/
destroyPlugins(): void;
/**
* Resume moving.
*/
resume(): void;
/**
* Set reversed moving.
*
* @param {boolean} [reversed] Is movement reversed?
*/
reverse(reversed?: boolean): void;
/**
* Pause moving.
*/
pause(): void;
/**
* Refresh timeline.
*/
invalidate(): void;
/**
* Recalculate data.
*/
update(): void;
/**
* Fully refresh and update all clones and position.
*
* @param {boolean} [update] Update after refresh.
*/
refresh(update?: boolean): void;
/**
* Destroy Reeller instance.
*
* @param {boolean} [removeClones] Remove clones from DOM.
* @param {boolean} [clearProps] Remove transformations.
*/
destroy(removeClones?: boolean, clearProps?: boolean): void;
}
import Base from "./Base";
import Filler from "./Filler";
//# sourceMappingURL=Reeller.d.ts.map