GSAP Gravity
Make the blocks of a section fall, bounce, pile up and get thrown around.
Turns the content of a section into a box with real gravity: its cards, images, buttons, headings or whole rows fall into the box, tumble, bounce off each other and come to rest in a pile — and visitors can grab any piece and throw it. It starts when the page loads, when the section scrolls into view, when the pointer moves over it, or on a click — on the section itself or on any element you name. Works in Elementor (containers and sections), Gutenberg (Group, Row, Stack, Grid and Columns blocks) and Divi 5 (sections, rows and columns).
Extension
Requirements
- One of: Elementor 3.6 or newer (containers; legacy sections work too) · the block editor (Gutenberg) · Divi 5
- WordPress 6.2 or newer
- PHP 7.4 or newer
- Moduly with GSAP built in (the release after 0.4.2). On an older Moduly — or with JavaScript off — the section simply keeps its normal layout.
In Elementor
- Switch it on in Moduly → Installed Widgets.
- Edit a page with Elementor and add a container. Put the things that should fall straight inside it: widgets (headings, buttons, images, text) and inner containers (a card with an image and a title is one piece).
- Select the outer container, open the Layout tab and find GSAP Gravity. Turn on Gravity and pick when it should Start.
- Preview or view the page.
On a legacy section the same settings are in Advanced → GSAP Gravity, and each column is one piece.
The editor keeps the normal layout so everything stays easy to select and edit; things fall on the live page.
In Gutenberg (block editor)
- Switch it on in Moduly → Installed Widgets.
- Add a Group block (its Row, Stack and Grid variations work too) or a Columns block and put the pieces in it — each inner block is one piece (a Group with a background, an image and a heading makes a good card; each Column of a Columns block is a piece).
- Select the outer block and open GSAP Gravity in the block sidebar. Turn on Gravity.
- Preview or view the page.
The block's saved content is never changed. To start on a click elsewhere, give that block a class under Advanced → Additional CSS class(es) and enter it as Element To Click (for example .drop-trigger). Box Height can be set for tablets (1024 px and below) and phones (781 px and below).
In Divi 5
- Switch it on in Moduly → Installed Widgets.
- In the Visual Builder open a section, row or column and go to Advanced → GSAP Gravity. Turn on Gravity.
- Save and view the page.
| On a… | the pieces are |
|---|---|
| Section | its rows |
| Row | its columns |
| Column | its modules — headings, buttons, images, blurbs… |
In the Visual Builder everything stays as laid out; things fall on the live page. Box Height and On This Device can differ per device (use Divi's device icons). To start on a click elsewhere, give that module a CSS class under Advanced → Attributes / CSS ID & Classes.
Start
| Start | What happens |
|---|---|
| When the page loads | Things fall as soon as the page (and its images) has loaded |
| When scrolled into view | When the Start Line is crossed. top 70% (default): when the top of the box reaches 70% down the screen. top center, center 80%, top bottom work too |
| When the pointer moves over it | On the first hover (or keyboard focus) |
| When it is clicked | A click anywhere in the box. Clicking Again on an empty part of the box drops everything again, or puts everything back (the next click drops), or does nothing |
| When another element is clicked | A click on any element matching the CSS selector you enter — a heading, a button, a menu link. Clicking it again: as above. A link to # does not jump to the top |
Until it starts the section is exactly as the builder laid it out.
Settings
| Setting | What you can set |
|---|---|
| Gravity | Turns the effect on for this container, block, section, row or column |
| Start, Start Line, Element To Click, Clicking Again | See above |
| Box Height | How tall the box is once things fall, in px or vh, per device. Empty: as tall as the laid-out content (things collapse to the bottom of the space they had) |
| Start From | Where they are laid out — the layout collapses · Above the box, in their columns · Above the box, scattered |
| Stagger | Seconds between one piece and the next (pieces let go bottom first, or wait higher up above the box) |
| Delay | Seconds before anything moves |
| Tumble | How much the pieces turn as they fall. 0: straight down |
| Gravity | 1 is normal; up to 4 |
| Bounce | 0: lands dead · 1: springs right back up |
| Friction | How much pieces grip each other and the floor |
| Air Resistance | Slows pieces down in flight |
| Side Walls | Off: pieces pushed past the sides fall out of the box |
| Floor | Off: everything falls through and out of the box (bring it back with the button or a click) |
| Shrink Full-Width Pieces | On (default): a heading, text or button as wide as the box falls at the width of its content |
| Collision Corners | How round the corners are when pieces collide, in px. Empty: each piece's own corner radius (a round piece rolls) |
| Drag & Throw | Grab pieces with the mouse and throw them |
| Drag On Touch Screens | On: a finger on a piece drags it (the page scrolls from the space between pieces). Off: it scrolls the page |
| Click vs. Drag | Links and buttons inside the pieces keep working — a press that moves less than this many px is a click |
| Button | None · Drop again · Reset (and drop). A small button in the top corner of the box once things have fallen |
| Button Text | Your own label. Empty: "Drop again" / "Reset" |
| Reduced Motion | For visitors whose device asks for less motion: leave the normal layout (default), or show the finished pile without motion |
| Turn Off On / On This Device | Devices that keep the normal layout |
Good to know
- Each piece keeps its own look; only its position changes. The box clips anything above or beside it while things fall.
- Resizing the window rebuilds the box around the pile; switching to a device with a different Box Height shows the finished pile.
- The animation runs only while something moves and the box is on screen; a resting pile costs nothing.
- Big pieces are heavy: a wide card lands harder than a small tag. Use Shrink Full-Width Pieces and a narrower card width for livelier piles.
For developers
One front-end script serves all three builders. Gutenberg and Divi elements carry the class mdly-grav-yes and their settings as JSON in data-mdly-grav; the element the pieces sit in has mdly-grav__box. While things fall the box has mdly-grav--live and each piece mdly-grav__item (is-grabbed while dragged); the button is .mdly-grav__button.