@egjs/flicking 4.2.4 → 4.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@egjs/flicking",
-	"version": "4.2.4",
+	"version": "4.4.0",
 	"description": "Everyday 30 million people experience. It's reliable, flexible and extendable carousel.",
 	"main": "dist/flicking.js",
 	"module": "dist/flicking.esm.js",
@@ -140,6 +140,7 @@
 	"dependencies": {
 		"@egjs/axes": "^2.8.0",
 		"@egjs/component": "^3.0.1",
+		"@egjs/imready": "^1.1.3",
 		"@egjs/list-differ": "^1.0.0"
 	},
 	"husky": {

package/src/Flicking.ts

@@ -6,10 +6,13 @@ import Component, { ComponentEvent } from "@egjs/component";
 
 import FlickingError from "./core/FlickingError";
 import Viewport from "./core/Viewport";
+import AutoResizer from "./core/AutoResizer";
 import { Panel } from "./core/panel";
+import { VanillaElementProvider } from "./core/panel/provider";
+import VirtualManager, { VirtualOptions } from "./core/VirtualManager";
 import { Control, SnapControl, SnapControlOptions, FreeControl, StrictControl, FreeControlOptions, StrictControlOptions } from "./control";
 import { BoundCamera, Camera, CircularCamera, LinearCamera } from "./camera";
-import { Renderer, VanillaRenderer, ExternalRenderer } from "./renderer";
+import { Renderer, VanillaRenderer, ExternalRenderer, RendererOptions, NormalRenderingStrategy, VirtualRenderingStrategy } from "./renderer";
 import { EVENTS, ALIGN, MOVE_TYPE, DIRECTION } from "./const/external";
 import * as ERROR from "./const/error";
 import { findIndex, getElement, includes, parseElement } from "./utils";
@@ -53,6 +56,7 @@ export interface FlickingOptions {
   adaptive: boolean;
   panelsPerView: number;
   noPanelStyleOverride: boolean;
+  resizeOnContentsReady: boolean;
   // EVENT
   needPanelThreshold: number;
   preventEventsBeforeInit: boolean;
@@ -71,12 +75,14 @@ export interface FlickingOptions {
   disableOnInit: boolean;
   // PERFORMANCE
   renderOnlyVisible: boolean;
+  virtual: VirtualOptions | null;
   // OTHERS
   autoInit: boolean;
   autoResize: boolean;
+  useResizeObserver: boolean;
   renderExternal: {
-    renderer: typeof ExternalRenderer;
-    rendererOptions: {[key: string]: any};
+    renderer: new (options: RendererOptions) => ExternalRenderer;
+    rendererOptions: RendererOptions;
   } | null;
 }
 
@@ -101,9 +107,11 @@ class Flicking extends Component<FlickingEvents> {
 
   // Core components
   private _viewport: Viewport;
+  private _autoResizer: AutoResizer;
   private _camera: Camera;
   private _control: Control;
   private _renderer: Renderer;
+  private _virtualManager: VirtualManager;
 
   // Options
   private _align: FlickingOptions["align"];
@@ -114,6 +122,8 @@ class Flicking extends Component<FlickingEvents> {
   private _adaptive: FlickingOptions["adaptive"];
   private _panelsPerView: FlickingOptions["panelsPerView"];
   private _noPanelStyleOverride: FlickingOptions["noPanelStyleOverride"];
+  private _resizeOnContentsReady: FlickingOptions["resizeOnContentsReady"];
+  private _virtual: FlickingOptions["virtual"];
 
   private _needPanelThreshold: FlickingOptions["needPanelThreshold"];
   private _preventEventsBeforeInit: FlickingOptions["preventEventsBeforeInit"];
@@ -133,8 +143,9 @@ class Flicking extends Component<FlickingEvents> {
 
   private _renderOnlyVisible: FlickingOptions["renderOnlyVisible"];
 
-  private _autoResize: FlickingOptions["autoResize"];
   private _autoInit: FlickingOptions["autoInit"];
+  private _autoResize: FlickingOptions["autoResize"];
+  private _useResizeObserver: FlickingOptions["useResizeObserver"];
   private _renderExternal: FlickingOptions["renderExternal"];
 
   // Internal State
@@ -205,6 +216,16 @@ class Flicking extends Component<FlickingEvents> {
    * @readonly
    */
   public get circularEnabled() { return this._camera.controlParams.circular; }
+  /**
+   * Whether the `virtual` option is enabled.
+   * The {@link Flicking#virtual virtual} option can't be enabled when  {@link Flicking#panelsPerView panelsPerView} is less or equal than zero.
+   * @ko {@link Flicking#virtual virtual} 옵션이 활성화되었는지 여부를 나타내는 멤버 변수.
+   * {@link Flicking#virtual virtual} 옵션은 {@link Flicking#panelsPerView panelsPerView} 옵션의 값이 0보다 같거나 작으면 비활성화됩니다.
+   * @type {boolean}
+   * @default false
+   * @readonly
+   */
+  public get virtualEnabled() { return this._panelsPerView > 0 && this._virtual != null; }
   /**
    * Index number of the {@link Flicking#currentPanel currentPanel}
    * @ko {@link Flicking#currentPanel currentPanel}의 인덱스 번호
@@ -356,6 +377,15 @@ class Flicking extends Component<FlickingEvents> {
    * @default false
    */
   public get noPanelStyleOverride() { return this._noPanelStyleOverride; }
+  /**
+   * Enabling this option will automatically call {@link Flicking#resize} when all image/video inside panels are loaded.
+   * This can be useful when you have contents inside Flicking that changes its size when it's loaded
+   * @ko 이 옵션을 활성화할 경우, Flicking 패널 내부의 이미지/비디오들이 로드되었을 때 자동으로 {@link Flicking#resize}를 호출합니다.
+   * 이 동작은 Flicking 내부에 로드 전/후로 크기가 변하는 콘텐츠를 포함하고 있을 때 유용하게 사용하실 수 있습니다.
+   * @type {boolean}
+   * @default false
+   */
+  public get resizeOnContentsReady() { return this._resizeOnContentsReady; }
   // EVENTS
   /**
    * A Threshold from viewport edge before triggering `needPanel` event
@@ -504,12 +534,45 @@ class Flicking extends Component<FlickingEvents> {
   public get disableOnInit() { return this._disableOnInit; }
   // PERFORMANCE
   /**
-   * Whether to render visible panels only. This can dramatically increase performance when there're many panels.
-   * @ko 보이는 패널만 렌더링할지 여부를 설정합니다. 패널이 많을 경우에 퍼포먼스를 크게 향상시킬 수 있습니다.
+   * Whether to render visible panels only. This can dramatically increase performance when there're many panels
+   * @ko 보이는 패널만 렌더링할지 여부를 설정합니다. 패널이 많을 경우에 퍼포먼스를 크게 향상시킬 수 있습니다
    * @type {boolean}
    * @default false
    */
   public get renderOnlyVisible() { return this._renderOnlyVisible; }
+  /**
+   * By enabling this option, it will reduce memory consumption by restricting the number of DOM elements to `panelsPerView + 1`
+   * Must be used with `panelsPerview`.
+   * After Flicking's initialized, this property can be used to add/remove the panel count.
+   * @ko 이 옵션을 활성화할 경우 패널 엘리먼트의 개수를 `panelsPerView + 1` 개로 고정함으로써, 메모리 사용량을 줄일 수 있습니다.
+   * `panelsPerView` 옵션과 함께 사용되어야만 합니다.
+   * Flicking 초기화 이후에, 이 프로퍼티는 렌더링하는 패널의 개수를 추가/제거하기 위해 사용될 수 있습니다.
+   * @type {VirtualManager}
+   * @property {function} renderPanel A rendering function for the panel element's innerHTML<ko>패널 엘리먼트의 innerHTML을 렌더링하는 함수</ko>
+   * @property {number} initialPanelCount Initial panel count to render<ko>최초로 렌더링할 패널의 개수</ko>
+   * @property {boolean} [cache=false] Whether to cache rendered panel's innerHTML<ko>렌더링된 패널의 innerHTML 정보를 캐시할지 여부</ko>
+   * @property {string} [panelClass="flicking-panel"] The class name that will be applied to rendered panel elements<ko>렌더링되는 패널 엘리먼트에 적용될 클래스 이름</ko>
+   * @example
+   * ```ts
+   * import Flicking, { VirtualPanel } from "@egjs/flicking";
+   *
+   * const flicking = new Flicking("#some_el", {
+   *   panelsPerView: 3,
+   *   virtual: {
+   *     renderPanel: (panel: VirtualPanel, index: number) => `Panel ${index}`,
+   *     initialPanelCount: 100
+   *   }
+   * });
+   *
+   * // Add 100 virtual panels (at the end)
+   * flicking.virtual.append(100);
+   *
+   * // Remove 100 virtual panels from 0 to 100
+   * flicking.virtual.remove(0, 100);
+   * ```
+   */
+  public get virtual() { return this._virtualManager; }
+
   // OTHERS
   /**
    * Call {@link Flicking#init init()} automatically when creating Flicking's instance
@@ -520,14 +583,19 @@ class Flicking extends Component<FlickingEvents> {
    */
   public get autoInit() { return this._autoInit; }
   /**
-   * Attach Flicking's {@link Flicking#resize resize} method to window's resize event.
-   * Flicking will automatically call {@link Flicking#resize resize} window size and orientation change.
-   * @ko Flicking의 {@link Flicking#resize resize} 메소드를 window의 resize 이벤트 핸들러로 등록합니다.
-   * 설정시 window 창 크기 및 orientation 변경에 의해 자동으로 {@link Flicking#resize resize}를 호출합니다.
+   * Whether to automatically call {@link Flicking#resize resize()} when the viewport element(.flicking-viewport)'s size is changed
+   * @ko 뷰포트 엘리먼트(.flicking-viewport)의 크기 변경시 {@link Flicking#resize resize()} 메소드를 자동으로 호출할지 여부를 설정합니다
    * @type {boolean}
    * @default true
    */
   public get autoResize() { return this._autoResize; }
+  /**
+   * Whether to listen {@link https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver ResizeObserver}'s event instead of Window's {@link https://developer.mozilla.org/ko/docs/Web/API/Window/resize_event resize} event when using the `autoResize` option
+   * @ko autoResize 옵션 사용시 {@link https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver ResizeObserver}의 이벤트를 Window객체의 {@link https://developer.mozilla.org/ko/docs/Web/API/Window/resize_event resize} 이벤트 대신 수신할지 여부를 설정합니다
+   * @type {boolean}
+   * @default true
+   */
+  public get useResizeObserver() { return this._useResizeObserver; }
   /**
    * This is an option for the frameworks(React, Vue, Angular, ...). Don't set it as it's automatically managed by Flicking.
    * @ko 프레임워크(React, Vue, Angular, ...)에서만 사용하는 옵션으로, 자동으로 설정되므로 따로 사용하실 필요 없습니다!
@@ -553,6 +621,7 @@ class Flicking extends Component<FlickingEvents> {
   public set adaptive(val: FlickingOptions["adaptive"]) { this._adaptive = val; }
   public set panelsPerView(val: FlickingOptions["panelsPerView"]) { this._panelsPerView = val; }
   public set noPanelStyleOverride(val: FlickingOptions["noPanelStyleOverride"]) { this._noPanelStyleOverride = val; }
+  public set resizeOnContentsReady(val: FlickingOptions["resizeOnContentsReady"]) { this._resizeOnContentsReady = val; }
   // EVENTS
   public set needPanelThreshold(val: FlickingOptions["needPanelThreshold"]) { this._needPanelThreshold = val; }
   public set preventEventsBeforeInit(val: FlickingOptions["preventEventsBeforeInit"]) { this._preventEventsBeforeInit = val; }
@@ -587,7 +656,23 @@ class Flicking extends Component<FlickingEvents> {
   // PERFORMANCE
   public set renderOnlyVisible(val: FlickingOptions["renderOnlyVisible"]) { this._renderOnlyVisible = val; }
   // OTHERS
-  public set autoResize(val: FlickingOptions["autoResize"]) { this._autoResize = val; }
+  public set autoResize(val: FlickingOptions["autoResize"]) {
+    this._autoResize = val;
+
+    if (val) {
+      this._autoResizer.enable();
+    } else {
+      this._autoResizer.disable();
+    }
+  }
+
+  public set useResizeObserver(val: FlickingOptions["useResizeObserver"]) {
+    this._useResizeObserver = val;
+
+    if (this._autoResize) {
+      this._autoResizer.enable();
+    }
+  }
 
   /**
    * @param root A root HTMLElement to initialize Flicking on it. When it's a typeof `string`, it should be a css selector string
@@ -626,6 +711,7 @@ class Flicking extends Component<FlickingEvents> {
     adaptive = false,
     panelsPerView = -1,
     noPanelStyleOverride = false,
+    resizeOnContentsReady = false,
     needPanelThreshold = 0,
     preventEventsBeforeInit = true,
     deceleration = 0.0075,
@@ -640,8 +726,10 @@ class Flicking extends Component<FlickingEvents> {
     preventClickOnDrag = true,
     disableOnInit = false,
     renderOnlyVisible = false,
+    virtual = null,
     autoInit = true,
     autoResize = true,
+    useResizeObserver = true,
     renderExternal = null
   }: Partial<FlickingOptions> = {}) {
     super();
@@ -659,6 +747,8 @@ class Flicking extends Component<FlickingEvents> {
     this._adaptive = adaptive;
     this._panelsPerView = panelsPerView;
     this._noPanelStyleOverride = noPanelStyleOverride;
+    this._resizeOnContentsReady = resizeOnContentsReady;
+    this._virtual = virtual;
     this._needPanelThreshold = needPanelThreshold;
     this._preventEventsBeforeInit = preventEventsBeforeInit;
     this._deceleration = deceleration;
@@ -673,17 +763,18 @@ class Flicking extends Component<FlickingEvents> {
     this._preventClickOnDrag = preventClickOnDrag;
     this._disableOnInit = disableOnInit;
     this._renderOnlyVisible = renderOnlyVisible;
-    this._autoResize = autoResize;
     this._autoInit = autoInit;
+    this._autoResize = autoResize;
+    this._useResizeObserver = useResizeObserver;
     this._renderExternal = renderExternal;
 
     // Create core components
     this._viewport = new Viewport(getElement(root));
+    this._autoResizer = new AutoResizer(this);
     this._renderer = this._createRenderer();
     this._camera = this._createCamera();
     this._control = this._createControl();
-
-    this.resize = this.resize.bind(this);
+    this._virtualManager = new VirtualManager(this, virtual);
 
     if (this._autoInit) {
       void this.init();
@@ -704,10 +795,12 @@ class Flicking extends Component<FlickingEvents> {
     const camera = this._camera;
     const renderer = this._renderer;
     const control = this._control;
+    const virtualManager = this._virtualManager;
     const originalTrigger = this.trigger;
     const preventEventsBeforeInit = this._preventEventsBeforeInit;
 
     camera.init(this);
+    virtualManager.init();
     renderer.init(this);
     control.init(this);
 
@@ -721,7 +814,7 @@ class Flicking extends Component<FlickingEvents> {
     await this._moveToInitialPanel();
 
     if (this._autoResize) {
-      window.addEventListener("resize", this.resize);
+      this._autoResizer.enable();
     }
     if (this._preventClickOnDrag) {
       control.controller.addPreventClickHandler();
@@ -729,6 +822,7 @@ class Flicking extends Component<FlickingEvents> {
     if (this._disableOnInit) {
       this.disableInput();
     }
+    renderer.checkPanelContentsReady(renderer.panels);
 
     this._plugins.forEach(plugin => plugin.init(this));
 
@@ -748,11 +842,9 @@ class Flicking extends Component<FlickingEvents> {
    * @return {void}
    */
   public destroy(): void {
-    if (!this._initialized) return;
-
     this.off();
-    window.removeEventListener("resize", this.resize);
 
+    this._autoResizer.disable();
     this._control.destroy();
     this._camera.destroy();
     this._renderer.destroy();
@@ -938,7 +1030,7 @@ class Flicking extends Component<FlickingEvents> {
    * @param {boolean} [options.includePanelHTML=false] Include panel's `outerHTML` to the returning status<ko>패널의 `outerHTML`을 반환값에 포함시킵니다</ko>
    * @param {boolean} [options.visiblePanelsOnly=false] Include only {@link Flicking#visiblePanel visiblePanel}'s HTML. This option is available only when the `includePanelHTML` is true
    * <ko>현재 보이는 패널({@link Flicking#visiblePanel visiblePanel})의 HTML만 반환합니다. `includePanelHTML`이 `true`일 경우에만 동작합니다.</ko>
-   * @return {Partial<Status>} An object with current status value information<ko>현재 상태값 정보를 가진 객체.</ko>
+   * @return {Status} An object with current status value information<ko>현재 상태값 정보를 가진 객체.</ko>
    */
   public getStatus({
     index = true,
@@ -1013,8 +1105,8 @@ class Flicking extends Component<FlickingEvents> {
 
     // Can't add/remove panels on external rendering
     if (panels[0]?.html && !this._renderExternal) {
-      renderer.batchRemove({ index: 0, deleteCount: this.panels.length });
-      renderer.batchInsert({ index: 0, elements: parseElement(panels.map(panel => panel.html!)) });
+      renderer.batchRemove({ index: 0, deleteCount: this.panels.length, hasDOMInElements: true });
+      renderer.batchInsert({ index: 0, elements: parseElement(panels.map(panel => panel.html!)), hasDOMInElements: true });
     }
 
     if (index) {
@@ -1112,7 +1204,7 @@ class Flicking extends Component<FlickingEvents> {
     if (control.animating) {
       // TODO:
     } else {
-      await control.updatePosition(prevProgressInPanel);
+      control.updatePosition(prevProgressInPanel);
       control.updateInput();
     }
 
@@ -1206,7 +1298,7 @@ class Flicking extends Component<FlickingEvents> {
       throw new FlickingError(ERROR.MESSAGE.NOT_ALLOWED_IN_FRAMEWORK, ERROR.CODE.NOT_ALLOWED_IN_FRAMEWORK);
     }
 
-    return this._renderer.batchInsert({ index, elements: parseElement(element) });
+    return this._renderer.batchInsert({ index, elements: parseElement(element), hasDOMInElements: true });
   }
 
   /**
@@ -1223,7 +1315,7 @@ class Flicking extends Component<FlickingEvents> {
       throw new FlickingError(ERROR.MESSAGE.NOT_ALLOWED_IN_FRAMEWORK, ERROR.CODE.NOT_ALLOWED_IN_FRAMEWORK);
     }
 
-    return this._renderer.batchRemove({ index, deleteCount });
+    return this._renderer.batchRemove({ index, deleteCount, hasDOMInElements: true });
   }
 
   private _createControl(): Control {
@@ -1269,15 +1361,39 @@ class Flicking extends Component<FlickingEvents> {
   }
 
   private _createRenderer(): Renderer {
-    const rendererOptions = {
-      align: this._align
-    };
-
     const renderExternal = this._renderExternal;
 
+    if (this._virtual && this._panelsPerView <= 0) {
+      // eslint-disable-next-line no-console
+      console.warn("\"virtual\" and \"panelsPerView\" option should be used together, ignoring virtual.");
+    }
+
     return renderExternal
-      ? new (renderExternal.renderer as any)({ ...rendererOptions, ...renderExternal.rendererOptions })
-      : new VanillaRenderer(rendererOptions);
+      ? this._createExternalRenderer()
+      : this._createVanillaRenderer();
+  }
+
+  private _createVanillaRenderer(): VanillaRenderer {
+    const virtual = this.virtualEnabled;
+
+    return new VanillaRenderer({
+      align: this._align,
+      strategy: virtual
+        ? new VirtualRenderingStrategy()
+        : new NormalRenderingStrategy({
+          providerCtor: VanillaElementProvider,
+          panelCtor: Panel
+        })
+    });
+  }
+
+  private _createExternalRenderer(): ExternalRenderer {
+    const {
+      renderer,
+      rendererOptions
+    } = this._renderExternal!;
+
+    return new (renderer)({ align: this._align, ...rendererOptions });
   }
 
   private async _moveToInitialPanel(): Promise<void> {
@@ -1287,6 +1403,8 @@ class Flicking extends Component<FlickingEvents> {
 
     if (!initialPanel) return;
 
+    control.setActive(initialPanel, null, false);
+
     return control.moveToPanel(initialPanel, {
       duration: 0
     });

package/src/camera/BoundCamera.ts

@@ -23,7 +23,7 @@ class BoundCamera extends Camera {
    * @return {this}
    */
   public updateRange() {
-    const flicking = getFlickingAttached(this._flicking, "Camera");
+    const flicking = getFlickingAttached(this._flicking);
     const renderer = flicking.renderer;
     const alignPos = this._alignPos;
 
@@ -61,7 +61,7 @@ class BoundCamera extends Camera {
   }
 
   public updateAnchors(): this {
-    const flicking = getFlickingAttached(this._flicking, "Camera");
+    const flicking = getFlickingAttached(this._flicking);
     const panels = flicking.renderer.panels;
 
     if (panels.length <= 0) {

package/src/camera/Camera.ts

@@ -10,7 +10,7 @@ import Panel from "../core/panel/Panel";
 import AnchorPoint from "../core/AnchorPoint";
 import * as ERROR from "../const/error";
 import { ALIGN, DIRECTION, EVENTS } from "../const/external";
-import { checkExistence, clamp, find, getFlickingAttached, getProgress, includes, parseAlign } from "../utils";
+import { checkExistence, clamp, find, getFlickingAttached, getProgress, includes, parseAlign, toArray } from "../utils";
 
 export interface CameraOptions {
   align: FlickingOptions["align"];
@@ -38,12 +38,19 @@ abstract class Camera {
 
   // Internal states getter
   /**
-   * The camera(`.flicking-camera`) element
-   * @ko 카메라(`.flicking-camera`) 엘리먼트
+   * The camera element(`.flicking-camera`)
+   * @ko 카메라 엘리먼트(`.flicking-camera`)
    * @type {HTMLElement}
    * @readonly
    */
   public get element() { return this._el; }
+  /**
+   * An array of the child elements of the camera element(`.flicking-camera`)
+   * @ko 카메라 엘리먼트(`.flicking-camera`)의 자식 엘리먼트 배열
+   * @type {HTMLElement[]}
+   * @readonly
+   */
+  public get children() { return toArray(this._el.children) as HTMLElement[]; }
   /**
    * Current position of the camera
    * @ko Camera의 현재 좌표
@@ -271,14 +278,14 @@ abstract class Camera {
    * <ko>{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} {@link Camera#init init}이 이전에 호출되지 않은 경우</ko>
    * @return {this}
    */
-  public async lookAt(pos: number): Promise<void> {
+  public lookAt(pos: number): void {
     const prevPos = this._position;
 
     this._position = pos;
-    await this._refreshVisiblePanels();
+    this._refreshVisiblePanels();
     this._checkNeedPanel();
     this._checkReachEnd(prevPos, pos);
-    this._applyTransform();
+    this.applyTransform();
   }
 
   /**
@@ -376,7 +383,7 @@ abstract class Camera {
    * @return {AnchorPoint | null}
    */
   public findActiveAnchor(): AnchorPoint | null {
-    const flicking = getFlickingAttached(this._flicking, "Camera");
+    const flicking = getFlickingAttached(this._flicking);
     const activeIndex = flicking.control.activeIndex;
 
     return find(this._anchors, anchor => anchor.panel.index === activeIndex);
@@ -418,7 +425,7 @@ abstract class Camera {
   public canSee(panel: Panel): boolean {
     const visibleRange = this.visibleRange;
     // Should not include margin, as we don't declare what the margin is visible as what the panel is visible.
-    return panel.includeRange(visibleRange.min, visibleRange.max, false);
+    return panel.isVisibleOnRange(visibleRange.min, visibleRange.max);
   }
 
   /**
@@ -449,7 +456,7 @@ abstract class Camera {
    * @return {this}
    */
   public updateAnchors(): this {
-    const flicking = getFlickingAttached(this._flicking, "Camera");
+    const flicking = getFlickingAttached(this._flicking);
     const panels = flicking.renderer.panels;
 
     this._anchors = panels.map((panel, index) => new AnchorPoint({
@@ -471,7 +478,7 @@ abstract class Camera {
    * @return {this}
    */
   public updateAdaptiveHeight() {
-    const flicking = getFlickingAttached(this._flicking, "Camera");
+    const flicking = getFlickingAttached(this._flicking);
     const activePanel = flicking.control.activePanel;
 
     if (!flicking.horizontal || !flicking.adaptive || !activePanel) return;
@@ -481,16 +488,24 @@ abstract class Camera {
     });
   }
 
-  public updateOffset() {
-    const flicking = getFlickingAttached(this._flicking, "Camera");
-    const unRenderedPanels = flicking.panels.filter(panel => !panel.rendered);
+  /**
+   * Update current offset of the camera
+   * @ko 현재 카메라의 오프셋을 업데이트합니다
+   * @chainable
+   * @return {this}
+   */
+  public updateOffset(): this {
+    const flicking = getFlickingAttached(this._flicking);
     const position = this._position;
+    const unRenderedPanels = flicking.panels.filter(panel => !panel.rendered);
 
     this._offset = unRenderedPanels
       .filter(panel => panel.position + panel.offset < position)
       .reduce((offset, panel) => offset + panel.sizeIncludingMargin, 0);
 
-    this._applyTransform();
+    this.applyTransform();
+
+    return this;
   }
 
   /**
@@ -504,6 +519,25 @@ abstract class Camera {
     return this;
   }
 
+  /**
+   * Apply "transform" style with the current position to camera element
+   * @ko 현재 위치를 기준으로한 transform 스타일을 카메라 엘리먼트에 적용합니다.
+   * @chainable
+   * @return {this}
+   */
+  public applyTransform(): this {
+    const el = this._el;
+    const flicking = getFlickingAttached(this._flicking);
+
+    const actualPosition = this._position - this._alignPos - this._offset;
+
+    el.style[this._transform] = flicking.horizontal
+      ? `translate(${-actualPosition}px)`
+      : `translate(0, ${-actualPosition}px)`;
+
+    return this;
+  }
+
   protected _resetInternalValues() {
     this._position = 0;
     this._alignPos = 0;
@@ -514,8 +548,8 @@ abstract class Camera {
     this._needPanelTriggered = { prev: false, next: false };
   }
 
-  protected async _refreshVisiblePanels() {
-    const flicking = getFlickingAttached(this._flicking, "Camera");
+  protected _refreshVisiblePanels() {
+    const flicking = getFlickingAttached(this._flicking);
     const panels = flicking.renderer.panels;
 
     const newVisiblePanels = panels.filter(panel => this.canSee(panel));
@@ -526,13 +560,13 @@ abstract class Camera {
     const removed: Panel[] = prevVisiblePanels.filter(panel => !includes(newVisiblePanels, panel));
 
     if (added.length > 0 || removed.length > 0) {
-      await flicking.renderer.render();
-
-      flicking.trigger(new ComponentEvent(EVENTS.VISIBLE_CHANGE, {
-        added,
-        removed,
-        visiblePanels: newVisiblePanels
-      }));
+      void flicking.renderer.render().then(() => {
+        flicking.trigger(new ComponentEvent(EVENTS.VISIBLE_CHANGE, {
+          added,
+          removed,
+          visiblePanels: newVisiblePanels
+        }));
+      });
     }
   }
 
@@ -541,7 +575,7 @@ abstract class Camera {
 
     if (needPanelTriggered.prev && needPanelTriggered.next) return;
 
-    const flicking = getFlickingAttached(this._flicking, "Camera");
+    const flicking = getFlickingAttached(this._flicking);
     const panels = flicking.renderer.panels;
 
     if (panels.length <= 0) {
@@ -588,7 +622,7 @@ abstract class Camera {
   }
 
   protected _checkReachEnd(prevPos: number, newPos: number): void {
-    const flicking = getFlickingAttached(this._flicking, "Camera");
+    const flicking = getFlickingAttached(this._flicking);
     const range = this._range;
 
     const wasBetweenRange = prevPos > range.min && prevPos < range.max;
@@ -603,17 +637,6 @@ abstract class Camera {
     }));
   }
 
-  protected _applyTransform(): void {
-    const el = this._el;
-    const flicking = getFlickingAttached(this._flicking, "Camera");
-
-    const actualPosition = this._position - this._alignPos - this._offset;
-
-    el.style[this._transform] = flicking.horizontal
-      ? `translate(${-actualPosition}px)`
-      : `translate(0, ${-actualPosition}px)`;
-  }
-
   protected _checkTranslateSupport = () => {
     const transforms = ["webkitTransform", "msTransform", "MozTransform", "OTransform", "transform"];