Fade

Applies fade in/out effects by adjusting opacity during panel transitions.

JavaScript

import Flicking from "@egjs/flicking";
import { Fade } from "@egjs/flicking-plugins";
import "@egjs/flicking/dist/flicking.css";
import "./styles.css";

const flicking = new Flicking("#flick", {
  circular: true,
  preventDefaultOnDrag: true
});

flicking.addPlugins(new Fade());

Open Sandbox

React

import { Fade } from "@egjs/flicking-plugins";
import Flicking from "@egjs/react-flicking";
import "@egjs/react-flicking/dist/flicking.css";
import "./styles.css";

const plugins = [new Fade()];

export default function App() {
  return (
    <Flicking circular={true} plugins={plugins} preventDefaultOnDrag={true}>
      <div className="flicking-panel">
        <img className="panel-image" src="https://picsum.photos/seed/fade1/600/300" />
      </div>
      <div className="flicking-panel">
        <img className="panel-image" src="https://picsum.photos/seed/fade2/600/300" />
      </div>
      <div className="flicking-panel">
        <img className="panel-image" src="https://picsum.photos/seed/fade3/600/300" />
      </div>
    </Flicking>
  );
}

Open Sandbox

Vue@3

<template>
  <Flicking :options="{ circular: true, preventDefaultOnDrag: true }" :plugins="plugins">
    <div class="flicking-panel">
      <img class="panel-image" src="https://picsum.photos/seed/fade1/600/300" />
    </div>
    <div class="flicking-panel">
      <img class="panel-image" src="https://picsum.photos/seed/fade2/600/300" />
    </div>
    <div class="flicking-panel">
      <img class="panel-image" src="https://picsum.photos/seed/fade3/600/300" />
    </div>
  </Flicking>
</template>

<script setup>
import { Fade } from "@egjs/flicking-plugins";
import Flicking from "@egjs/vue3-flicking";
import "@egjs/vue3-flicking/dist/flicking.css";

const plugins = [new Fade()];
</script>


<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-panel {
  position: relative;
  border-radius: 5px;
  width: 80%;
  margin-right: 10px;
  height: 200px;
  overflow: hidden;
}

.panel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

</style>

Open Sandbox

Summary

Key Options

Option	Type	Default	Description
selector	string	""	CSS selector for the element to apply the effect to. If empty, the effect is applied to the panel itself
scale	number	1	Effect intensity multiplier

Details

How It Works

The Fade plugin automatically adjusts opacity based on each panel's visible ratio. The currently visible panel becomes opaque, while panels moving out of view become transparent.

Usage

import { Fade } from "@egjs/flicking-plugins";

// Basic usage
flicking.addPlugins(new Fade());

// Apply to a specific element only
flicking.addPlugins(new Fade("img"));

// Adjust effect intensity
flicking.addPlugins(new Fade("", 2));

Notes

Caution

• Using with circular: true enables a seamless fade effect.
• If the panel background is transparent, panels behind may show through. It is recommended to use an opaque background color or image.

Related Links

Related Demos

• Parallax: Parallax scroll effect
• AutoPlay: Use with autoplay