# 3D Cards Tornado
> A helical 3D card orbit that auto-spins with drag, wheel, and touch control — ideal for immersive galleries.
**Definition:** 3D Cards Tornado is a sliders UI animation from collections.html. It is built with HTML, CSS, JavaScript, and GSAP, ships with a live preview, and is free to copy into personal and commercial projects.
## Facts
- Category: Sliders
- Stack: HTML, CSS, JavaScript, and GSAP
- Added: 2026-08-01
- Canonical page: https://html.bosconvertpro.com/collection/3d-cards-tornado
- Full-page preview: https://html.bosconvertpro.com/collection/3d-cards-tornado/full
- Live demo: https://html.bosconvertpro.com/demos/3d-cards-tornado/index.html
- Markdown mirror: https://html.bosconvertpro.com/collection/3d-cards-tornado/index.md
- License: https://html.bosconvertpro.com/terms
## How to use
1. Open https://html.bosconvertpro.com/collection/3d-cards-tornado/full to preview the animation in full screen.
2. Copy index.html, styles.css, and script.js from the code tabs on https://html.bosconvertpro.com/collection/3d-cards-tornado.
3. Paste the files into your project and adjust timing, easing, and content as needed.
## FAQ
### What is 3D Cards Tornado?
3D Cards Tornado is a sliders UI animation from collections.html. A helical 3D card orbit that auto-spins with drag, wheel, and touch control — ideal for immersive galleries.
### What is 3D Cards Tornado built with?
3D Cards Tornado is built with HTML, CSS, JavaScript, and GSAP. The source for every file is shown on the animation page and can be copied straight into your project.
### How do I use 3D Cards Tornado in my project?
Open the animation page (https://html.bosconvertpro.com/collection/3d-cards-tornado), preview it live, then copy index.html, styles.css, and script.js from the code tabs. Paste the files into your project and adjust timing, easing, and content as needed. A standalone demo runs at https://html.bosconvertpro.com/demos/3d-cards-tornado/index.html.
### Is 3D Cards Tornado free to use?
Yes. The 3D Cards Tornado demo code may be used in personal and commercial projects. You may not resell or redistribute the collection itself as a competing template pack. Full terms: https://html.bosconvertpro.com/terms.
## Source — index.html
````html
3D Cards Tornado — GSAP
````
## Source — styles.css
````css
/* ─────────────────────────────────────────────
3D Cards Tornado
HTML / CSS / GSAP (Observer + ScrollTrigger)
───────────────────────────────────────────── */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: #000;
color: #fff;
overflow: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img {
display: block;
max-width: none;
-webkit-user-drag: none;
user-select: none;
}
.app {
width: 100%;
height: 100%;
height: 100dvh;
background: #000;
overflow: hidden;
}
/* ── Tornado stage ─────────────────────────── */
.cards-tornado {
cursor: grab;
touch-action: none;
width: 100%;
height: 100%;
height: 100dvh;
position: relative;
overflow: clip;
background: #000;
-webkit-user-select: none;
user-select: none;
}
.cards-tornado:active {
cursor: grabbing;
}
.cards-tornado__collection {
width: 100%;
height: 100%;
position: relative;
}
.cards-tornado__list {
/* em-based sizing drives card width via font-size */
font-size: clamp(0.5em, 0.75vw, 1.5em);
width: 100%;
height: 100%;
perspective: 75em;
transform-style: preserve-3d;
position: relative;
}
.cards-tornado__item {
transform-style: preserve-3d;
backface-visibility: visible;
will-change: transform, filter;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* Start hidden until first render to avoid flash */
opacity: 0;
}
/* ── Card ──────────────────────────────────── */
.demo-card {
aspect-ratio: 4 / 5;
pointer-events: none;
-webkit-user-select: none;
user-select: none;
background-color: #1a1a1a;
border-radius: 1em;
width: 18em;
position: relative;
overflow: hidden;
box-shadow:
0 0.25em 1.5em rgba(0, 0, 0, 0.45),
0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}
.cover-image {
object-fit: cover;
border-radius: inherit;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
pointer-events: none;
}
/* ── Reduced motion ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.cards-tornado__item {
transition: none !important;
}
}
/* ── Small screens — slightly tighter cards ── */
@media (max-width: 640px) {
.cards-tornado__list {
font-size: clamp(0.45em, 2.2vw, 0.85em);
}
}
````
## Source — script.js
````javascript
/**
* 3D Cards Tornado
* GSAP + Observer + ScrollTrigger
*
* Cards form a helical 3D orbit (tornado). Auto-rotates forever.
* Wheel / drag / touch accelerate and reverse the spin.
*/
(() => {
"use strict";
if (typeof gsap === "undefined") {
console.error("[3D Tornado] GSAP failed to load from CDN.");
return;
}
gsap.registerPlugin(Observer, ScrollTrigger);
gsap.config({ force3D: true, nullTargetWarn: false });
gsap.ticker.lagSmoothing(500, 33);
/* ── Image fallbacks (Unsplash → Picsum) ── */
document.querySelectorAll("img.cover-image[data-fallback]").forEach((img) => {
img.addEventListener(
"error",
function onErr() {
const fb = img.getAttribute("data-fallback");
if (fb && img.src !== fb) img.src = fb;
img.removeEventListener("error", onErr);
},
{ once: true }
);
});
function init3DCardsTornado() {
const containers = gsap.utils.toArray("[data-3d-tornado-init]");
/* Tunables */
const rotationAngle = 30; // degrees between cards on the orbit
const cardYSpacing = 0.3; // vertical offset as fraction of card height
const edgeOffset = 2; // how far past viewport edge fade starts
const orbitDepth = 35; // radius of tornado (in em)
const autoSpeed = 0.00325; // idle spin speed
const scrollSpeed = 0.015; // input → velocity scale
const dragMultiplier = 5; // pointer/touch sensitivity boost
const scrollEase = 0.1; // velocity lerp toward autoSpeed
const maxSpeed = 0.2; // clamp peak velocity
const edgeScale = 0.5; // distance over which edge fade runs
const edgeEase = gsap.parseEase("power2.inOut");
const minScale = 1; // scale floor for far cards (1 = no shrink by depth)
const backDarkness = 0.75; // max darkening for cards behind the camera
const backBlur = 0.5; // max blur (em) for rear cards
containers.forEach((container) => {
const list = container.querySelector("[data-3d-tornado-list]");
if (!list) return;
/* Snapshot originals before rebuild clones them */
const originalCards = gsap.utils
.toArray("[data-3d-tornado-item]", list)
.map((card) => card.cloneNode(true));
if (!originalCards.length) return;
let inputObserver = null;
let resizeTimer = null;
const state = {
amount: 0,
progress: 0,
velocity: autoSpeed,
direction: 1,
cardHeight: 0,
cardGap: 0,
em: 16,
isActive: false,
cards: [],
};
function getCardAmount() {
const containerHalfHeight = container.offsetHeight * 0.5;
const edgeOffsetDistance = state.cardHeight * edgeOffset;
const fadeDistance = state.cardHeight * edgeScale;
const neededDistance =
containerHalfHeight + edgeOffsetDistance + fadeDistance;
const cardsPerSide = Math.ceil(neededDistance / state.cardGap) + 1;
const neededAmount = cardsPerSide * 2 + 1;
const batchCount = Math.ceil(neededAmount / originalCards.length);
return originalCards.length * Math.max(1, batchCount);
}
function buildCards() {
list.innerHTML = "";
/* Measure one card for height / em */
const measureCard = originalCards[0].cloneNode(true);
list.appendChild(measureCard);
state.cardHeight = measureCard.offsetHeight || 280;
state.cardGap = state.cardHeight * cardYSpacing;
state.em =
parseFloat(getComputedStyle(measureCard).fontSize) ||
parseFloat(getComputedStyle(list).fontSize) ||
16;
state.amount = getCardAmount();
list.innerHTML = "";
for (let i = 0; i < state.amount; i++) {
const card = originalCards[i % originalCards.length].cloneNode(true);
card.dataset.index = String(i);
/* Re-wire image fallbacks on clones */
card.querySelectorAll("img.cover-image[data-fallback]").forEach((img) => {
img.addEventListener(
"error",
function onErr() {
const fb = img.getAttribute("data-fallback");
if (fb && img.src !== fb) img.src = fb;
img.removeEventListener("error", onErr);
},
{ once: true }
);
});
list.appendChild(card);
}
state.cards = gsap.utils.toArray("[data-3d-tornado-item]", list);
}
/** Scale factor that fades cards near vertical edges of the viewport */
function getEdgeScale(y) {
const containerHalfHeight = container.offsetHeight * 0.5;
const edgeOffsetDistance = state.cardHeight * edgeOffset;
const fadeDistance = state.cardHeight * edgeScale;
const distanceFromCenter = Math.abs(y);
const fadeStart = containerHalfHeight + edgeOffsetDistance;
const progress = gsap.utils.clamp(
0,
1,
(fadeStart - distanceFromCenter) / fadeDistance
);
return edgeEase(progress);
}
function render() {
const radius = orbitDepth * state.em;
state.cards.forEach((card) => {
const startIndex = parseFloat(card.dataset.index);
const loopIndex =
(((startIndex + state.progress) % state.amount) + state.amount) %
state.amount;
/* Center the loop around 0 so cards sit above & below the middle */
const index =
loopIndex > state.amount * 0.5
? loopIndex - state.amount
: loopIndex;
const angleDeg = index * rotationAngle;
const angleRad = (angleDeg * Math.PI) / 180;
/* 0 at center of chain, 1 at farthest ends — used for z-index */
const center = 1 - Math.min(Math.abs(index) / (state.amount * 0.5), 1);
const y = index * state.cardGap;
const baseScale = minScale + center * (1 - minScale);
const scale = baseScale * getEdgeScale(y);
/* Cards on the far side of the orbit (cos ≈ -1) get dark + blur */
const backAmount = gsap.utils.clamp(0, 1, (1 - Math.cos(angleRad)) * 0.5);
const brightness = 1 - backAmount * backDarkness;
const blur = backAmount * backBlur;
gsap.set(card, {
xPercent: -50,
yPercent: -50,
x: Math.sin(angleRad) * radius,
y,
z: (Math.cos(angleRad) - 1) * radius,
rotateY: angleDeg,
scale,
filter: `brightness(${brightness}) blur(${blur}em)`,
autoAlpha: 1,
zIndex: Math.round(center * 1000),
force3D: true,
});
});
}
function tick() {
if (!state.isActive) return;
const targetVelocity = autoSpeed * state.direction;
state.velocity = gsap.utils.interpolate(
state.velocity,
targetVelocity,
scrollEase
);
state.progress += state.velocity;
render();
}
function handleInput(self) {
if (!state.isActive) return;
const isWheel = self.event && self.event.type === "wheel";
let delta;
if (isWheel) {
delta = self.deltaY;
} else {
/* Prefer dominant axis for drag / touch */
delta =
Math.abs(self.deltaX) > Math.abs(self.deltaY)
? self.deltaX * dragMultiplier
: self.deltaY * dragMultiplier;
}
if (!delta) return;
state.direction = delta > 0 ? 1 : -1;
state.velocity += (delta * scrollSpeed) / 100;
state.velocity = gsap.utils.clamp(-maxSpeed, maxSpeed, state.velocity);
}
function setActive(isActive) {
state.isActive = isActive;
if (!inputObserver) return;
if (isActive) {
inputObserver.enable();
} else {
inputObserver.disable();
}
}
function rebuild() {
buildCards();
render();
}
rebuild();
inputObserver = Observer.create({
target: window,
type: "wheel,touch,pointer",
preventDefault: false,
lockAxis: true,
onChange: handleInput,
onPress: () => {
container.style.cursor = "grabbing";
},
onRelease: () => {
container.style.cursor = "grab";
},
});
ScrollTrigger.create({
trigger: container,
start: "top bottom",
end: "bottom top",
onEnter: () => setActive(true),
onEnterBack: () => setActive(true),
onLeave: () => setActive(false),
onLeaveBack: () => setActive(false),
});
setActive(ScrollTrigger.isInViewport(container));
gsap.ticker.add(tick);
window.addEventListener("resize", () => {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => {
rebuild();
ScrollTrigger.refresh();
}, 150);
});
});
}
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", init3DCardsTornado);
} else {
init3DCardsTornado();
}
})();
````
