GSAP Gravity (Divi)

GSAP Gravity is switched on in the Advanced tab of a column (its modules fall), a row (its columns fall) and a section (its rows fall). Pieces fall, bounce and can be picked up and thrown. One demo per start trigger.

1. On page load — a column's modules from above

Gravity on the column · Start: page load · Start From: above the box · Box Height 440px (phone: 560px) · Button: Drop again.

2. Scrolled into view — a row's columns collapse

Gravity on the row · Start: scrolled into view, start line "top 60%" · Start From: where they are laid out · Box Height: the laid-out height · Tumble 0.6.

3. On hover — buttons, scattered, no side walls

Gravity on the column · Start: pointer over it · Start From: scattered · Side Walls off · Box Height 320px · Button: Reset.

4. On click — a section's rows

Gravity on the section · Start: click the section · Clicking Again: puts everything back · Box Height 60vh · Gravity 1.4.

5. Click another element — mixed modules

Gravity on the column · Start: a click on the button below (CSS class drop-divi) · Clicking Again: drops again · Start From: scattered · Box Height 460px · Touch drag off. The button inside the box is a real link.

That’s all five triggers.