Dropping Elements (Divi)

Words, icons, images or emoji that drop into a box for Divi 5 and pile up with real physics, or land on their own places. Grab them and throw them. Each item is an Item child module. Without JavaScript they sit as a neat pile, so nothing is ever missing.

1. Drop and pile up

Physics engine, Drop mode, starting when scrolled into view · the Vivid palette · twelve capsules, random order, poured from anywhere along the top, 110 ms apart · grab and throw · a content layer behind the items with an eyebrow, a heading and a button · 460 px box with a soft background and a 24 px radius (420 px and 13 px text on phones).

2. Collapse, with emoji and icons

Left: Collapse — emoji circles start in rows, then fall · Pastel palette · heavier lemons (weight 3) · copies (three of each) · bounciness 0.6. Right: Font Awesome icons with labels, hexagons and pills mixed · Monochrome · the cursor pushes them away.

3. Float with photos, on dark

Float — zero gravity, drifting at speed 80 · round photo items (120 px) mixed with neon capsules · the Neon palette · a cursor glow · the cursor attracts the four nearest items.

4. Placed engine

Each tag drops onto its own place with two bounces and a squash on landing · Earth palette · starts on click (or Enter) — the box shows “Click to drop” · a “Drop again” replay button at the top right · placed items spring back after dragging · positions and angles set per item.

5. Click this heading to drop the new-season tags

Start: when another element is clicked (here this heading, by its CSS ID) · each click drops them again · Pastel palette · gravity 3.5, bounciness 0.35.

6. A start line and heavier physics

Starts once the box top reaches 70 % of the screen · gravity 3 (the range now goes up to 5) · bounciness 0.6 · friction 0.4 · air resistance 0.6 · Mono palette · every tag links to the shop.

7. No side walls, click to pop

Side Walls off — push a letter past an edge and it falls out of the box · click empty space to pop the nearest one · a replay button brings everything back · Neon palette.

8. Card items

New in 1.1: card items with a title, a line of text and an optional picture — for promises, facts and a lookbook teaser. Earth palette · box height 520 px.

9. Gentle on phones and for reduced motion

Starts on page load · Grab on Touch Screens off, so a swipe scrolls the page · Reduced Motion: a plain row of tags · turned off on phones · Ocean palette.

10. Finished design

Rise — the items fall upwards and pile against the ceiling · no palette: light-sky capsules from the Design tab that turn amber on hover · a gradient box with a 32 px radius and a deep shadow · a content layer in front, at the bottom-left, with a white heading, text and an amber pill button · replays each time it scrolls into view.