WP InView Documentation

Choosing which elements animate

By default, WP InView auto-detects which children to animate. It walks down the DOM tree until it finds a node with more than one visible child, then takes those children. This works well for simple layouts, but Gutenberg often wraps content in extra divs — so auto-detect may grab the wrong level. You have two ways to take control.

The .iv-item marker class

Add the class iv-item to any elements you want to include in the cascade. WP InView will always collect these elements regardless of other settings — you cannot suppress this behavior. This is the recommended approach. It works reliably regardless of how deeply nested your elements are, and it survives theme or block markup changes.

Example — pricing table with feature lists:

html

<div class="pricing-wrapper">  <!-- Cascade enabled here -->
  <div class="plan">
    <li class="iv-item">Unlimited users</li>
    <li class="iv-item">Priority support</li>
    <li class="iv-item">Custom domain</li>
  </div>
  <div class="plan">
    <li class="iv-item">5 users</li>
    <li class="iv-item">Email support</li>
  </div>
</div>

All five <li> elements animate in sequence across both columns — one cascade on the wrapper handles everything.

Custom selector

In the global Cascade settings (WP InView → Cascade → Child selector ), you can enter a CSS selector to target specific elements. The selector is scoped to the cascade root — it searches within the block, not the whole page.

li	All list items inside the block
img	All images
.your-class	Elements with a custom class
.wrapper li	List items inside a specific wrapper

Learn more about CSS Selectors

The custom selector adds elements on top of any .iv-item elements already found. If neither finds anything, auto-detect kicks in.

Note: if your selector references a class that sits above the cascade root (e.g. .custom-class is on a parent element), it will not be found — the search starts from the cascade block itself downward.

Delay: global step vs block delay

The timing between each child is controlled by Step — set globally in WP InView → Cascade settings.

Step (global) — the default delay between each child, in milliseconds. A step of 120ms means: first child at 0ms, second at 120ms, third at 240ms, and so on.

Block delay — the Delay value set on the block itself (in the animation panel). When a block has its own delay set, it overrides the global step. This lets you slow down or speed up a specific cascade without touching the global setting.

If the block delay is 0 (or not set), the global step is used.

Limit

Limit controls the maximum number of children that will animate. If your container has more children than the limit, the extra ones are ignored.

Why it exists: animating a very large number of elements in sequence creates a long tail — the last element might not animate until several seconds after the first. This is rarely the intended effect and can feel broken on slower devices.

The default limit is 24, which covers most real-world use cases — a three-column pricing table with 8 features per column fits within a single cascade. Increase the limit if you need more, but keep performance in mind: each animated element adds work for the browser.

Nested cascades

You can place a cascade inside another cascade — for example, a section with cascade enabled, containing a card that also has cascade enabled.

WP InView isolates each cascade to its own root. Inner cascade elements are not captured by the outer cascade, and vice versa.

However, the timing can get complex — the inner cascade’s delay is added on top of the outer cascade’s delay for that card. Test carefully and adjust the step values to get the rhythm you want.

A warning is shown in the editor when nested cascades are detected. → Learn more about nested cascades