WP InView

Scroll-triggered entrance animations and page transitions for any WordPress block - configured directly from the block sidebar. No coding needed.

Description

WP InView brings smooth, professional entrance animations to the WordPress block editor. Select any block, open the WP InView panel, choose an animation type and you're done. Everything is configured per block directly in the editor - no shortcodes, no page builders, no CSS.

Five animation types:

• Move - the element slides in from a chosen direction (up, down, left, right) while fading in. Control direction, distance and opacity start.
• Fade - pure opacity fade-in with no movement. Clean and subtle.
• Zoom - the element scales in (or out) as it enters the viewport. Includes optional Rubber effect that adds a natural spring overshoot at the end.
• Blur - the element transitions from blurred to sharp. Great for images and hero sections.
• Mask Reveal - content is revealed with a wipe effect using a CSS mask. Choose direction: up, down, left, right, horizontal or vertical split.

Global settings, per-block overrides:

Set your defaults once in Settings → WP InView - animation type, duration, easing, trigger timing - and every animated block picks them up automatically. When you need something different on a specific block, turn off "Global settings" in the sidebar panel and customise freely.

Cascade - staggered child animation:

Enable Cascade on any container block (columns, group, list…) and its child elements animate one after another in a staggered sequence. Use the block delay as the step between children, or set a fixed step value. A configurable CSS selector controls which children are targeted.

Page Transition:

Opt-in animated transitions between pages, giving your site the feel of a single-page application. Three transition styles available:

• Fade - smooth fade through a customisable overlay colour.
• Blur - the outgoing page blurs and fades before the new one appears.
• Curtain - a coloured overlay slides in from a chosen direction (left, right, top, bottom, centre) and slides out as the page loads.

Trigger profiles:

Control exactly when each animation fires relative to the viewport. Five ready-made profiles - Natural, Early bird, On focus, Just in time, Late entrance - or go fully custom with manual Threshold and Root margin values.

Easing presets:

Five named easing curves (Smooth, Standard, Ease out, Ease in-out, Linear) plus a Custom input for any valid CSS cubic-bezier() value.

Respects user preferences:

Animations are automatically suppressed for visitors who have enabled "Reduce motion" in their operating system. No extra configuration needed.

Zero performance overhead on non-animated pages:

Frontend CSS and JavaScript are only enqueued on pages that actually contain animated blocks. Pages with no animations load zero additional assets from this plugin.

Block editor panel modes:

Choose between a floating popup panel (default) or a standard inspector sidebar panel - whichever fits your workflow.

Full i18n support:

All strings are translatable. Ships with a Polish (pl_PL) translation. Compatible with the standard WordPress translation system.

Installation

1. Upload the wp-inview folder to /wp-content/plugins/.
2. Activate the plugin through the Plugins screen in WordPress.
3. Go to Settings → WP InView to configure global defaults.
4. Open any post or page in the block editor, click a block, and look for the WP InView button in the block toolbar (popup mode) or the WP InView panel in the block sidebar (sidebar mode).

Minimum requirements

• WordPress 6.2 or higher
• PHP 7.4 or higher
• A modern browser (Chrome, Firefox, Safari, Edge - current versions)

Frequently Asked Questions

Animations work in the editor but not on the live site

This is intentional. The plugin detects the block editor environment and suppresses animations there to avoid interfering with editing. They activate on the published frontend.

An animation never triggers on mobile

The Threshold value may be too high. If an element is taller than the visible area of the screen, a threshold of 0.5 means "50% visible" - which may never be reached. Reduce Threshold to 0.10 or 0.15, or switch the Trigger profile to "Early bird" or "Just in time".

Cascade is not animating my inner blocks correctly

Some Gutenberg blocks wrap their children in extra non-editable div elements that you cannot see or select in the editor. In those cases the default Child selector > * may target the invisible wrapper instead of the visible children.

Fix: add the same CSS class to each child element you want to animate (e.g. inview-item via the block's Advanced → Additional CSS class(es) panel), then add that class to the Child selector field as , .inview-item. The leading dot and comma separator are required.

The page transition overlay flashes on the first page load

This is expected on the very first visit. The plugin stores the transition overlay colour in sessionStorage on the first navigation and reads it back on subsequent loads to apply the overlay before paint. There is no flash from the second page onwards within the same session.

Can I disable animations globally without deactivating the plugin?

Yes. Go to Settings → WP InView → Animation tab and toggle the "Enable animations" switch off. The frontend assets will no longer be enqueued and no animations will run, but all your per-block configuration is preserved.

Does this work with FSE (Full Site Editing) / Site Editor?

WP InView hooks into the standard block editor extension API (editor.BlockEdit filter) and is compatible with the Site Editor. Animations configured in templates and template parts will work on the frontend.

Is there a conflict with caching plugins?

The plugin stores settings in a WordPress option with a transient cache on top. If you save new settings and the frontend does not reflect them, try purging your caching plugin's cache. WP InView itself does not interfere with any caching layer.

Does the plugin add anything to the database?

Yes - one WordPress option (wp_inview_settings) is created when you first save settings. If you enable the "Remove data on uninstall" option in Settings → WP InView → Settings tab, this option is deleted when the plugin is uninstalled.

Can I use custom easing curves?

Yes. In any easing field, select "Custom…" and type any valid CSS cubic-bezier() value, for example cubic-bezier(0.34, 1.56, 0.64, 1). The value is validated server-side before saving.

What does "Rubber" do in the Zoom animation type?

Rubber adds a small overshoot at the end of the zoom animation - the element slightly exceeds its target scale and then settles back to 1.0, like a rubber band. Four presets (Soft, Medium, Hard, Custom) control the overshoot intensity. Custom mode lets you set the amplitude numerically (e.g. 0.035 = 3.5% overshoot).

Does the plugin track any data or make external requests?

No. WP InView makes no external HTTP requests, collects no analytics, and sends no data anywhere. See the Privacy section below for details on local browser storage.

Screenshots

1. The WP InView floating panel open in the block editor with Zoom animation selected.
2. The full Animation settings tab in the admin dashboard - global defaults for all animation types.
3. Cascade settings tab - child selector, limit, step mode and fixed step controls.
4. Page Transition settings tab - Fade, Blur and Curtain variants with per-variant controls.
5. General settings tab - language selector, editor panel mode, data removal on uninstall.

Privacy

WP InView stores the following data client-side only - it is never transmitted to any server.

Editor panel position (localStorage key: wp-inview-panel-state) When using the floating popup panel mode in the block editor, the position and size of the panel are saved in the browser's localStorage so they are remembered between editing sessions. This data stays in your browser and is cleared if you clear your browser's local storage.

Page transition state (sessionStorage key: wp_inview_page_transition_v1) When Page Transition is enabled, the overlay colour and state are stored in sessionStorage during page navigation. This is used to display the correct overlay colour immediately on the next page before the stylesheet loads, eliminating a flash of unstyled overlay. The data is automatically cleared when the browser session ends (tab or window closed).

No cookies are set. No data leaves the visitor's browser.

Changelog

0.9.0

• Initial public release candidate.
• Five animation types: Move, Fade, Zoom, Blur, Mask Reveal.
• Cascade - staggered animation of child elements with configurable selector, limit and step.
• Page Transition with three variants: Fade, Blur, Curtain.
• Five trigger profiles: Natural, Early bird, On focus, Just in time, Late entrance.
• Five easing presets plus custom cubic-bezier input.
• Rubber effect for Zoom (Soft / Medium / Hard / Custom amplitude).
• Floating popup panel and sidebar panel modes.
• Global settings with per-block overrides.
• Animations respect prefers-reduced-motion.
• Frontend assets load only on pages with animated blocks.
• Polish (pl_PL) translation included.
• Requires WordPress 6.2+, PHP 7.4+.

Upgrade Notice

0.9.0

Initial release. No upgrade path required.