@egjs/flicking-plugins 4.8.0-beta.0 → 4.8.0

package/README.md

@@ -1,75 +1,66 @@
-# @egjs/flicking-plugins [![version][badge-version]][link-version] <a href="https://travis-ci.org/naver/egjs-flicking-plugins" target="_blank"><img alt="Travis (.org)" src="https://img.shields.io/travis/naver/egjs-flicking-plugins.svg?style=flat-square&label=build&logo=travis%20ci" /></a> [![Coverage Status](https://coveralls.io/repos/github/naver/egjs-flicking-plugins/badge.svg?branch=master)](https://coveralls.io/github/naver/egjs-flicking-plugins?branch=master)
+# @egjs/flicking-plugins
 
+> Part of the [@egjs/flicking](https://github.com/naver/egjs-flicking) monorepo.
 
 <h1 align="center" style="max-width: 100%;">
   <img width="800" alt="Flicking Logo" src="https://naver.github.io/egjs-flicking/images/flicking.svg" style="max-width: 100%;" /><br/>
   <a href="https://naver.github.io/egjs-flicking/Plugins">@egjs/flicking-plugins</a>
 </h1>
 
-Ready to use plugins for [@egjs/flicking](https://github.com/naver/egjs-flicking)
-- [Demos & Documents](https://naver.github.io/egjs-flicking/Plugins)
-- [AutoPlay](https://naver.github.io/egjs-flicking/Plugins#autoplay): Add autoplay to move to the next/previous panel periodically.
-- [Parallax](https://naver.github.io/egjs-flicking/Plugins#parallax): Add parallax effect attached with Flicking interaction.
-- [Fade](https://naver.github.io/egjs-flicking/Plugins#fade): Add fade effect attached with Flicking interaction.
-- [Arrow](https://naver.github.io/egjs-flicking/Plugins#arrow): Add prev/next button to Flicking.
-- [Pagination](https://naver.github.io/egjs-flicking/Plugins#pagination): Add a pagination bullets to Flicking.
+Ready-to-use plugins for [@egjs/flicking](https://github.com/naver/egjs-flicking)
+
+## Available Plugins
+
+- [**AutoPlay**](https://naver.github.io/egjs-flicking/Plugins#autoplay): Add autoplay to move to the next/previous panel periodically.
+- [**Parallax**](https://naver.github.io/egjs-flicking/Plugins#parallax): Add parallax effect attached with Flicking interaction.
+- [**Fade**](https://naver.github.io/egjs-flicking/Plugins#fade): Add fade effect attached with Flicking interaction.
+- [**Perspective**](https://naver.github.io/egjs-flicking/Plugins#perspective): Add 3D perspective effect.
+- [**Sync**](https://naver.github.io/egjs-flicking/Plugins#sync): Synchronize multiple Flicking instances.
+- [**Arrow**](https://naver.github.io/egjs-flicking/Plugins#arrow): Add prev/next button to Flicking.
+- [**Pagination**](https://naver.github.io/egjs-flicking/Plugins#pagination): Add pagination bullets to Flicking.
 
 ## ⚙️ Installation
-#### npm
+
+### npm
 ```bash
 npm install @egjs/flicking-plugins
 ```
 
-#### CDN
-- **Latest**
-   - https://naver.github.io/egjs-flicking-plugins/release/latest/dist/plugins.js (all)
-   - https://naver.github.io/egjs-flicking-plugins/release/latest/dist/plugins.min.js (all)
-- **Specific version**
-   - https://naver.github.io/egjs-flicking-plugins/release/[PLUGIN-VERSION]/dist/plugins.js (all)
-   - https://naver.github.io/egjs-flicking-plugins/release/[PLUGIN-VERSION]/dist/plugins.min.js (all)
+### CDN
+```html
+<!-- All plugins -->
+<script src="https://unpkg.com/@egjs/flicking-plugins/dist/plugins.js"></script>
 
-## 🏃 Quick Start
-```js
-import { Fade, Parallax, AutoPlay } from "@egjs/flicking-plugins";
-
-flicking.addPlugins(new Fade(), new Parallax(), new AutoPlay());
+<!-- Specific version -->
+<script src="https://unpkg.com/@egjs/flicking-plugins@VERSION/dist/plugins.js"></script>
 ```
 
-## 📝 Feedback
-Please file an [Issue](https://github.com/naver/egjs-flicking/issues).
+## 📖 Documentation
+
+Full documentation: [https://naver.github.io/egjs-flicking/Plugins](https://naver.github.io/egjs-flicking/Plugins)
+
+## 💻 Development
 
-## 📜 License
-egjs-flicking-plugins is released under the [MIT license](http://naver.github.io/egjs/license.txt).
+This package is part of the [egjs-flicking monorepo](https://github.com/naver/egjs-flicking). See the root README for development instructions.
 
+### Building
+```bash
+pnpm build
 ```
-Copyright (c) 2019-present NAVER Corp.
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.  IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
+
+### Testing
+```bash
+pnpm test
 ```
 
-<p align="center">
-  <a href="https://naver.github.io/egjs/"><img height="50" src="https://naver.github.io/egjs/img/logotype1_black.svg" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://github.com/naver"><img height="50" src="https://naver.github.io/OpenSourceGuide/book/assets/naver_logo.png" /></a>
-</p>
+## 📝 License
+
+MIT License
+
+Copyright (c) 2015-present NAVER Corp.
 
+See [LICENSE](../../LICENSE) for details.
 
-<!-- badges -->
-[badge-version]: https://img.shields.io/npm/v/@egjs/flicking-plugins.svg?style=flat
+## 🙌 Contributing
 
-<!-- links -->
-[link-version]: https://www.npmjs.com/package/@egjs/flicking-plugins
+See [CONTRIBUTING.md](../../CONTRIBUTING.md) for contribution guidelines.

package/css/all.css

@@ -0,0 +1,2 @@
+@import "./arrow.css";
+@import "./pagination.css";

package/css/arrow.css

@@ -90,11 +90,11 @@
 .flicking-arrow-prev.is-thin::before,
 .flicking-arrow-prev.is-thin::after,
 .flicking-arrow-next.is-thin::before,
-.flicking-arrow-next.is-thin::after{
+.flicking-arrow-next.is-thin::after {
   height: 3px;
 }
 
 .flicking-arrow-prev.is-thin::after,
-.flicking-arrow-next.is-thin::after{
+.flicking-arrow-next.is-thin::after {
   top: calc(50% - 2px);
 }

package/css/pagination.css

@@ -20,7 +20,7 @@
 }
 
 .flicking-pagination-scroll .flicking-pagination-slider {
-  transition: .2s transform;
+  transition: 0.2s transform;
 }
 .flicking-pagination-scroll.flicking-pagination-uninitialized .flicking-pagination-slider,
 .flicking-pagination-scroll.flicking-pagination-uninitialized .flicking-pagination-bullet {
@@ -41,7 +41,7 @@
 .flicking-pagination-scroll .flicking-pagination-bullet {
   vertical-align: middle;
   position: relative;
-  transition: .2s transform;
+  transition: 0.2s transform;
 }
 
 .flicking-pagination-bullet-active {
@@ -51,7 +51,9 @@
 .flicking-pagination-scroll .flicking-pagination-bullet {
   vertical-align: middle;
   position: relative;
-  transition: .2s transform,.2s left;
+  transition:
+    0.2s transform,
+    0.2s left;
   transform: scale(0);
 }
 

package/declaration/Arrow.d.ts

@@ -1,51 +1,106 @@
-import Flicking, { Plugin } from "@egjs/flicking";
-interface ArrowOptions {
-    parentEl: HTMLElement | null;
-    prevElSelector: string;
-    nextElSelector: string;
-    disabledClass: string;
-    moveCount: number;
-    moveByViewportSize: boolean;
-    interruptable: boolean;
-}
-declare class Arrow implements Plugin {
-    private _flicking;
-    private _prevEl;
-    private _nextEl;
-    private _nextIndex;
-    private _parentEl;
-    private _prevElSelector;
-    private _nextElSelector;
-    private _disabledClass;
-    private _moveCount;
-    private _moveByViewportSize;
-    private _interruptable;
-    get prevEl(): HTMLElement;
-    get nextEl(): HTMLElement;
-    get parentEl(): ArrowOptions["parentEl"];
-    get prevElSelector(): ArrowOptions["prevElSelector"];
-    get nextElSelector(): ArrowOptions["nextElSelector"];
-    get disabledClass(): ArrowOptions["disabledClass"];
-    get moveCount(): ArrowOptions["moveCount"];
-    get moveByViewportSize(): ArrowOptions["moveByViewportSize"];
-    get interruptable(): ArrowOptions["interruptable"];
-    set parentEl(val: ArrowOptions["parentEl"]);
-    set prevElSelector(val: ArrowOptions["prevElSelector"]);
-    set nextElSelector(val: ArrowOptions["nextElSelector"]);
-    set disabledClass(val: ArrowOptions["disabledClass"]);
-    set moveCount(val: ArrowOptions["moveCount"]);
-    set moveByViewportSize(val: ArrowOptions["moveByViewportSize"]);
-    set interruptable(val: ArrowOptions["interruptable"]);
-    constructor({ parentEl, prevElSelector, nextElSelector, disabledClass, moveCount, moveByViewportSize, interruptable }?: Partial<ArrowOptions>);
-    init(flicking: Flicking): void;
-    destroy(): void;
-    update(): void;
-    private _preventInputPropagation;
-    private _onPrevClick;
-    private _onNextClick;
-    private _onAnimation;
-    private _onWillChange;
-    private _updateClass;
-    private _onCatch;
-}
-export default Arrow;
+import Flicking, { Plugin } from "@egjs/flicking";
+/**
+ * Options for the {@link Arrow} plugin
+ */
+export interface ArrowOptions {
+    /**
+     * The parent element to search for arrow elements. If `null`, the Flicking element is used
+     * @defaultValue null
+     */
+    parentEl: HTMLElement | null;
+    /**
+     * CSS selector for the "previous" arrow element
+     * @defaultValue ".flicking-arrow-prev"
+     */
+    prevElSelector: string;
+    /**
+     * CSS selector for the "next" arrow element
+     * @defaultValue ".flicking-arrow-next"
+     */
+    nextElSelector: string;
+    /**
+     * CSS class added to an arrow element when it is disabled (at the start/end of non-circular Flicking)
+     * @defaultValue "flicking-arrow-disabled"
+     */
+    disabledClass: string;
+    /**
+     * Number of panels to move when an arrow is clicked
+     * @defaultValue 1
+     */
+    moveCount: number;
+    /**
+     * Whether to move by viewport size instead of panel count
+     * @defaultValue false
+     */
+    moveByViewportSize: boolean;
+}
+/**
+ * A plugin to easily create prev/next arrow buttons for Flicking
+ * @see {@link https://naver.github.io/egjs-flicking/docs/demos/plugins/arrow | Demo: Arrow}
+ */
+declare class Arrow implements Plugin {
+    private _flicking;
+    private _prevEl;
+    private _nextEl;
+    private _parentEl;
+    private _prevElSelector;
+    private _nextElSelector;
+    private _disabledClass;
+    private _moveCount;
+    private _moveByViewportSize;
+    /** The "previous" arrow HTMLElement
+     * @readonly
+     */
+    get prevEl(): HTMLElement;
+    /** The "next" arrow HTMLElement
+     * @readonly
+     */
+    get nextEl(): HTMLElement;
+    /** Current value of the {@link ArrowOptions.parentEl | parentEl} option. */
+    get parentEl(): ArrowOptions["parentEl"];
+    /** Current value of the {@link ArrowOptions.prevElSelector | prevElSelector} option. */
+    get prevElSelector(): ArrowOptions["prevElSelector"];
+    /** Current value of the {@link ArrowOptions.nextElSelector | nextElSelector} option. */
+    get nextElSelector(): ArrowOptions["nextElSelector"];
+    /** Current value of the {@link ArrowOptions.disabledClass | disabledClass} option. */
+    get disabledClass(): ArrowOptions["disabledClass"];
+    /** Current value of the {@link ArrowOptions.moveCount | moveCount} option. */
+    get moveCount(): ArrowOptions["moveCount"];
+    /** Current value of the {@link ArrowOptions.moveByViewportSize | moveByViewportSize} option. */
+    get moveByViewportSize(): ArrowOptions["moveByViewportSize"];
+    /** Sets {@link ArrowOptions.parentEl | parentEl}. */
+    set parentEl(val: ArrowOptions["parentEl"]);
+    /** Sets {@link ArrowOptions.prevElSelector | prevElSelector}. */
+    set prevElSelector(val: ArrowOptions["prevElSelector"]);
+    /** Sets {@link ArrowOptions.nextElSelector | nextElSelector}. */
+    set nextElSelector(val: ArrowOptions["nextElSelector"]);
+    /** Sets {@link ArrowOptions.disabledClass | disabledClass}. */
+    set disabledClass(val: ArrowOptions["disabledClass"]);
+    /** Sets {@link ArrowOptions.moveCount | moveCount}. */
+    set moveCount(val: ArrowOptions["moveCount"]);
+    /** Sets {@link ArrowOptions.moveByViewportSize | moveByViewportSize}. */
+    set moveByViewportSize(val: ArrowOptions["moveByViewportSize"]);
+    /**
+     * @param options - Options for the Arrow instance
+     * @example
+     * ```ts
+     * flicking.addPlugins(new Arrow({ parentEl: null, prevElSelector: ".flicking-arrow-prev", nextElSelector: ".flicking-arrow-next" }));
+     * ```
+     */
+    constructor(options?: Partial<ArrowOptions>);
+    /** Initialize the plugin and attach arrow event listeners to the Flicking instance.
+     * @param flicking - The Flicking instance to attach this plugin to
+     */
+    init(flicking: Flicking): void;
+    /** Destroy the plugin and remove all arrow event listeners. */
+    destroy(): void;
+    /** Update the arrow disabled/enabled state based on the current camera position. */
+    update(): void;
+    private _preventInputPropagation;
+    private _onPrevClick;
+    private _onNextClick;
+    private _onAnimation;
+    private _updateClass;
+    private _onCatch;
+}
+export default Arrow;

package/declaration/AutoPlay.d.ts

@@ -1,40 +1,104 @@
-import Flicking, { Plugin, DIRECTION } from "@egjs/flicking";
-interface AutoPlayOptions {
-    duration: number;
-    animationDuration: number | undefined;
-    direction: typeof DIRECTION["NEXT"] | typeof DIRECTION["PREV"];
-    stopOnHover: boolean;
-    delayAfterHover: number;
-}
-declare class AutoPlay implements Plugin {
-    private _duration;
-    private _animationDuration;
-    private _direction;
-    private _stopOnHover;
-    private _delayAfterHover;
-    private _flicking;
-    private _timerId;
-    private _mouseEntered;
-    private _playing;
-    get duration(): number;
-    get animationDuration(): number | undefined;
-    get direction(): AutoPlayOptions["direction"];
-    get stopOnHover(): boolean;
-    get delayAfterHover(): number;
-    get playing(): boolean;
-    set duration(val: number);
-    set animationDuration(val: number | undefined);
-    set direction(val: AutoPlayOptions["direction"]);
-    set stopOnHover(val: boolean);
-    set delayAfterHover(val: number);
-    constructor({ duration, animationDuration, direction, stopOnHover, delayAfterHover }?: Partial<AutoPlayOptions>);
-    init(flicking: Flicking): void;
-    destroy(): void;
-    update(): void;
-    play: () => void;
-    stop: () => void;
-    private _movePanel;
-    private _onMouseEnter;
-    private _onMouseLeave;
-}
-export default AutoPlay;
+import Flicking, { DIRECTION, Plugin } from "@egjs/flicking";
+/**
+ * Options for the {@link AutoPlay} plugin
+ */
+export interface AutoPlayOptions {
+    /**
+     * Time to wait before moving on to the next panel (ms)
+     * @defaultValue 2000
+     */
+    duration: number;
+    /**
+     * Duration of the panel move animation (ms). If `undefined`, the Flicking instance's `duration` is used
+     * @defaultValue undefined
+     */
+    animationDuration: number | undefined;
+    /**
+     * The direction in which the panel moves
+     * @defaultValue "NEXT"
+     */
+    direction: (typeof DIRECTION)["NEXT"] | (typeof DIRECTION)["PREV"];
+    /**
+     * Whether to stop when the mouse hovers over the element
+     * @defaultValue false
+     */
+    stopOnHover: boolean;
+    /**
+     * Whether to stop autoplay when the plugin is first initialized
+     * @defaultValue false
+     */
+    stopOnInit: boolean;
+    /**
+     * If `stopOnHover` is true, time to wait before resuming after mouse leaves (ms)
+     * @defaultValue Same as `duration`
+     */
+    delayAfterHover: number;
+}
+/**
+ * Plugin that allows you to automatically move to the next/previous panel on a specific time basis
+ * @see {@link https://naver.github.io/egjs-flicking/docs/demos/plugins/autoplay | Demo: AutoPlay}
+ */
+declare class AutoPlay implements Plugin {
+    private _duration;
+    private _animationDuration;
+    private _direction;
+    private _stopOnHover;
+    private _stopOnInit;
+    private _delayAfterHover;
+    private _flicking;
+    private _timerId;
+    private _mouseEntered;
+    private _playing;
+    /** Current value of the {@link AutoPlayOptions.duration | duration} option. */
+    get duration(): number;
+    /** Current value of the {@link AutoPlayOptions.animationDuration | animationDuration} option. */
+    get animationDuration(): number | undefined;
+    /** Current value of the {@link AutoPlayOptions.direction | direction} option. */
+    get direction(): AutoPlayOptions["direction"];
+    /** Current value of the {@link AutoPlayOptions.stopOnHover | stopOnHover} option. */
+    get stopOnHover(): boolean;
+    /** Current value of the {@link AutoPlayOptions.stopOnInit | stopOnInit} option. */
+    get stopOnInit(): boolean;
+    /** Current value of the {@link AutoPlayOptions.delayAfterHover | delayAfterHover} option. */
+    get delayAfterHover(): number;
+    /** Whether the autoplay is currently active
+     * @readonly
+     */
+    get playing(): boolean;
+    /** Sets {@link AutoPlayOptions.duration | duration}. */
+    set duration(val: number);
+    /** Sets {@link AutoPlayOptions.animationDuration | animationDuration}. */
+    set animationDuration(val: number | undefined);
+    /** Sets {@link AutoPlayOptions.direction | direction}. */
+    set direction(val: AutoPlayOptions["direction"]);
+    /** Sets {@link AutoPlayOptions.stopOnHover | stopOnHover}. */
+    set stopOnHover(val: boolean);
+    /** Sets {@link AutoPlayOptions.stopOnInit | stopOnInit}. */
+    set stopOnInit(val: boolean);
+    /** Sets {@link AutoPlayOptions.delayAfterHover | delayAfterHover}. */
+    set delayAfterHover(val: number);
+    /**
+     * @param options - Options for the AutoPlay instance
+     * @example
+     * ```ts
+     * flicking.addPlugins(new AutoPlay({ duration: 2000, direction: "NEXT" }));
+     * ```
+     */
+    constructor(options?: Partial<AutoPlayOptions>);
+    /** Initialize the plugin and start autoplay on the given Flicking instance.
+     * @param flicking - The Flicking instance to attach this plugin to
+     */
+    init(flicking: Flicking): void;
+    /** Destroy the plugin, stop autoplay, and remove all event listeners. */
+    destroy(): void;
+    /** Update the plugin state. This is a no-op for AutoPlay. */
+    update(): void;
+    /** Start the autoplay timer. Panels will move automatically after the configured {@link AutoPlayOptions.duration | duration}. */
+    play: () => void;
+    /** Stop the autoplay timer and cancel any pending panel movement. */
+    stop: () => void;
+    private _movePanel;
+    private _onMouseEnter;
+    private _onMouseLeave;
+}
+export default AutoPlay;

package/declaration/Fade.d.ts

@@ -1,16 +1,41 @@
-import Flicking, { Plugin } from "@egjs/flicking";
-declare class Fade implements Plugin {
-    private _flicking;
-    private _selector;
-    private _scale;
-    get selector(): string;
-    get scale(): number;
-    set selector(val: string);
-    set scale(val: number);
-    constructor(selector?: string, scale?: number);
-    init(flicking: Flicking): void;
-    destroy(): void;
-    update: () => void;
-    private _onMove;
-}
-export default Fade;
+import Flicking, { Plugin } from "@egjs/flicking";
+/**
+ * A plugin to apply fade in/out effect while panels are moving
+ * @see {@link https://naver.github.io/egjs-flicking/docs/demos/plugins/fade | Demo: Fade}
+ */
+declare class Fade implements Plugin {
+    private _flicking;
+    private _selector;
+    private _scale;
+    /** CSS selector for the element to apply the fade effect. If empty, the panel element itself is used
+     * @readonly
+     */
+    get selector(): string;
+    /** Effect amplification scale
+     * @readonly
+     */
+    get scale(): number;
+    /** Sets the CSS selector for the target fade element. */
+    set selector(val: string);
+    /** Sets the effect amplification scale. */
+    set scale(val: number);
+    /**
+     * @param selector - CSS selector for the element to apply the fade effect. If empty, the panel element itself is used
+     * @param scale - Effect amplification scale
+     * @example
+     * ```ts
+     * flicking.addPlugins(new Fade("p", 1));
+     * ```
+     */
+    constructor(selector?: string, scale?: number);
+    /** Initialize the plugin and apply the fade effect to the Flicking instance.
+     * @param flicking - The Flicking instance to attach this plugin to
+     */
+    init(flicking: Flicking): void;
+    /** Destroy the plugin and remove all event listeners. */
+    destroy(): void;
+    /** Recalculate and apply the fade effect to all visible panels. */
+    update: () => void;
+    private _onMove;
+}
+export default Fade;

package/declaration/Parallax.d.ts

@@ -1,16 +1,41 @@
-import Flicking, { Plugin } from "@egjs/flicking";
-declare class Parallax implements Plugin {
-    private _flicking;
-    private _selector;
-    private _scale;
-    get selector(): string;
-    get scale(): number;
-    set selector(val: string);
-    set scale(val: number);
-    constructor(selector?: string, scale?: number);
-    init(flicking: Flicking): void;
-    destroy(): void;
-    update: () => void;
-    private _onMove;
-}
-export default Parallax;
+import Flicking, { Plugin } from "@egjs/flicking";
+/**
+ * A plugin to apply parallax effect while panels are moving
+ * @see {@link https://naver.github.io/egjs-flicking/docs/demos/plugins/parallax | Demo: Parallax}
+ */
+declare class Parallax implements Plugin {
+    private _flicking;
+    private _selector;
+    private _scale;
+    /** CSS selector for the element to apply the parallax effect. If empty, the panel element itself is used
+     * @readonly
+     */
+    get selector(): string;
+    /** Effect amplification scale
+     * @readonly
+     */
+    get scale(): number;
+    /** Sets the CSS selector for the target parallax element. */
+    set selector(val: string);
+    /** Sets the effect amplification scale. */
+    set scale(val: number);
+    /**
+     * @param selector - CSS selector for the element to apply the parallax effect. If empty, the panel element itself is used
+     * @param scale - Effect amplification scale
+     * @example
+     * ```ts
+     * flicking.addPlugins(new Parallax("img", 1));
+     * ```
+     */
+    constructor(selector?: string, scale?: number);
+    /** Initialize the plugin and apply the parallax effect to the Flicking instance.
+     * @param flicking - The Flicking instance to attach this plugin to
+     */
+    init(flicking: Flicking): void;
+    /** Destroy the plugin and remove all event listeners. */
+    destroy(): void;
+    /** Recalculate and apply the parallax effect to all visible panels. */
+    update: () => void;
+    private _onMove;
+}
+export default Parallax;