Coverflow

Use indexProgress from the Reactive API to apply 3D rotation and scaling effects that create an album-art style coverflow interface.

JavaScript

import Flicking, { connectFlickingReactiveAPI } from "@egjs/flicking";
import "@egjs/flicking/dist/flicking.css";
import "./styles.css";

// Capture panel references BEFORE Flicking init (circular mode may modify DOM)
const panels = document.querySelectorAll(".flicking-panel");
const LENGTH = 5;

const flicking = new Flicking("#flick", {
  circular: true,
  align: "center"
});
const reactiveAPI = connectFlickingReactiveAPI(flicking);

const update = value => {
  panels.forEach((panel, index) => {
    const childProgress = ((index - value + LENGTH * 1.5) % LENGTH) - LENGTH * 0.5;
    const scale = Math.max(0, 0.9 - Math.abs(childProgress) * 0.2);

    panel.style.transformOrigin = `${50 - childProgress * 50}% 50%`;
    panel.style.transform = `rotateY(${-childProgress * 50}deg) scale(${scale})`;
  });
};

// Apply initial state and subscribe to changes
update(reactiveAPI.indexProgress);
reactiveAPI.subscribe("indexProgress", update);

Open Sandbox

React

import Flicking, { useFlickingReactiveAPI } from "@egjs/react-flicking";
import React from "react";
import "@egjs/react-flicking/dist/flicking.css";
import "./styles.css";

const COLORS = ["#3498db", "#e74c3c", "#2ecc71", "#9b59b6", "#f39c12"];
const LENGTH = 5;

export default function App() {
  const flickingRef = React.useRef(null);
  const { indexProgress } = useFlickingReactiveAPI(flickingRef);

  return (
    <Flicking ref={flickingRef} circular={true} align="center" className="flicking-coverflow">
      {[0, 1, 2, 3, 4].map(index => {
        const childProgress = ((index - indexProgress + LENGTH * 1.5) % LENGTH) - LENGTH * 0.5;
        const scale = Math.max(0, 0.9 - Math.abs(childProgress) * 0.2);

        return (
          <div
            key={index}
            className="flicking-panel"
            style={{
              backgroundColor: COLORS[index % COLORS.length],
              transformOrigin: `${50 - childProgress * 50}% 50%`,
              transform: `rotateY(${-childProgress * 50}deg) scale(${scale})`
            }}
          >
            {index + 1}
          </div>
        );
      })}
    </Flicking>
  );
}

Open Sandbox

Vue@3

<script setup>
import Flicking, { useFlickingReactiveAPI } from "@egjs/vue3-flicking";
import { ref } from "vue";
import "@egjs/vue3-flicking/dist/flicking.css";

const COLORS = ["#3498db", "#e74c3c", "#2ecc71", "#9b59b6", "#f39c12"];
const LENGTH = 5;

const flickingRef = ref(null);
const { indexProgress } = useFlickingReactiveAPI(flickingRef);

const getStyle = index => {
  const childProgress = ((index - indexProgress.value + LENGTH * 1.5) % LENGTH) - LENGTH * 0.5;
  const scale = Math.max(0, 0.9 - Math.abs(childProgress) * 0.2);

  return {
    backgroundColor: COLORS[index % COLORS.length],
    transformOrigin: `${50 - childProgress * 50}% 50%`,
    transform: `rotateY(${-childProgress * 50}deg) scale(${scale})`
  };
};
</script>

<template>
  <Flicking
    ref="flickingRef"
    :options="{ circular: true, align: 'center' }"
    class="flicking-coverflow"
  >
    <div
      v-for="index in 5"
      :key="index - 1"
      class="flicking-panel"
      :style="getStyle(index - 1)"
    >
      {{ index }}
    </div>
  </Flicking>
</template>


<style>

.flicking-viewport.vertical {
  display: block;
  width: 100%;
}

.flicking-panel {
  width: 200px;
  height: 150px;
  margin-right: 10px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  color: white;
}

.panel-1 { background: #3e8ed0; }
.panel-2 { background: #00d1b2; }
.panel-3 { background: #f14668; }
.panel-4 { background: #ffe08a; color: #333; }
.panel-5 { background: #48c78e; }

.demo-container {
  margin-bottom: 24px;
}

.demo-label {
  font-weight: bold;
  margin-bottom: 8px;
  color: #666;
}

.button {
  padding: 8px 16px;
  margin: 4px;
  border: 2px solid #3498db;
  background: transparent;
  color: #3498db;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.button:hover {
  background: #3498db;
  color: white;
}

.controls {
  display: flex;
  justify-content: center;
  margin-top: 16px;
  gap: 8px;
}

.flicking-coverflow {
  perspective: 800px;
}

.flicking-coverflow .flicking-camera {
  transform-style: preserve-3d;
}

.flicking-panel {
  width: 150px;
  height: 200px;
  margin: 0 10px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: bold;
  color: white;
  backface-visibility: hidden;
}

</style>

Open Sandbox

Summary

Key API

Property	Type	Description
indexProgress	number	Camera position as a fractional panel index
useFlickingReactiveAPI	Hook (React)	Subscribe to reactive state in React
connectFlickingReactiveAPI	Function (Vanilla)	Subscribe to reactive state in Vanilla JS

Effect Mapping

Panel Position	rotateY	scale	transformOrigin
Current (childProgress ~ 0)	0deg	0.9	50% 50%
Adjacent (childProgress ~ +/-1)	-/+50deg	0.7	shifted toward center
Far (childProgress ~ +/-2)	-/+100deg	0.5	shifted toward center

Details

What is indexProgress?

indexProgress represents the current camera position as a fractional panel index. For example, 2.5 means the camera is exactly halfway between panel 2 and panel 3. It updates in real-time during drag, enabling smooth visual transitions.

How It Works

For circular mode, each panel's childProgress is calculated with wrapping:

const childProgress = (index - indexProgress + length * 1.5) % length - length * 0.5;

This value drives three CSS transform properties:

• rotateY: Panels rotate around the Y-axis, angling away from center
• scale: Panels shrink as they move further from center
• transformOrigin: Shifts to create a natural perspective pivot point

Related Options

• circular: true: Essential for seamless coverflow looping without dead ends.
• align: "center": Places the active panel at the visual center of the coverflow.

Use Cases

When to use

• Album / portfolio gallery
• Product showcase
• Media player UI

Important Notes

Note

• Set CSS perspective on the viewport and transform-style: preserve-3d on the camera for 3D effects to render.
• Use at least 5 panels to avoid gaps when using circular mode.

Related Links

Related API

• indexProgress: Fractional panel index progress
• connectFlickingReactiveAPI: Connect Flicking to Reactive API

Related Demos

• Parallax: Parallax scrolling effect using indexProgress
• Progress Bar: Scroll progress indicator