Description
Innovate ScrollStage is a visual studio for scroll-linked animation. Tune a scroll effect against a live preview, copy its motion “recipe”, and attach it to content you build natively in your page builder — Elementor, the block editor (Gutenberg), or hand-coded HTML.
The motion runs on a small, self-contained runtime built for this plugin. Recipes are motion-only: they describe the animation, never your content or layout, so your markup stays native and SEO-friendly.
What you get
- A built-in Studio editor (WP Admin Innovate ScrollStage Editor): pick an effect, tune its parameters live, preview it, and copy the recipe or export starter markup.
- Two scroll effects — Fade + Slide-in (each section fades and slides into the reading zone) and Media Parallax (a section’s media layer drifts at its own speed for depth).
- Native tagging for your builder. Choose your builder under Settings and Innovate ScrollStage adds simple role/recipe controls, so you can turn your own containers into a scroll stage using the builder edition you already run.
- A starter template (Minimal) to drop in and edit natively.
- Universal code export that works in any builder with a raw-HTML/embed widget.
How it works
- Open the Studio editor and design an effect.
- Copy the recipe (a small JSON string).
- In your builder, tag a section as the scroll stage and paste the recipe. Innovate ScrollStage injects the data attributes at render and the runtime animates it on scroll.
Supported builders
- Elementor — native “Innovate ScrollStage” controls on containers/sections/columns.
- Gutenberg (block editor) — a “Innovate ScrollStage” inspector panel on Group/Columns/Cover blocks, plus a block pattern.
- WPBakery — paste the Studio’s code export into a Raw HTML element, or use the “Innovate ScrollStage” fields on rows and columns.
- Any other builder with a raw-HTML/embed widget — paste the same code export.
Open source runtime
The animation engine and runtime are MIT-licensed. This plugin is GPL. A separate, optional premium edition with additional effects and a larger template library is available from Innovate Web Development; it is not required and is not distributed here.
No code is minified or obfuscated in a way that hides its source. The front-end runtime ships twice: assets/scroll-studio.js is the plain, human-readable build, and assets/scroll-studio.min.js is the same code minified for production. Both are produced by esbuild from the readable engine modules included in this plugin at app/packages/engine/. Every other script and stylesheet ships unminified, and the plugin loads no code from any remote server or CDN.
Screenshots
Installation
- Upload the
innovate-scrollstagefolder to/wp-content/plugins/, or install the plugin through the Plugins screen in WordPress. - Activate the plugin.
- Go to Innovate ScrollStage Settings and select the page builder(s) you use.
- Open Innovate ScrollStage Editor to design your first effect.
FAQ
-
Do I need a paid edition of my page builder?
-
No. Builders differ in whether their free edition lets you put custom attributes on an element — Elementor, for instance, keeps that control in its paid tier. Innovate ScrollStage adds its own role and recipe controls instead, so they appear whichever edition you run.
-
What does it add to my pages?
-
Data attributes and marker classes, at render time only. Your content stays in native builder markup, so nothing changes about how you edit it or how search engines read it.
-
Will it slow down my site?
-
The runtime is a single small script that only initializes on pages that actually use an Innovate ScrollStage recipe, and it is event-driven — it does no work while the page is still.
-
Does it load anything from an external server?
-
No. The runtime ships with the plugin and no external script, font or service is requested.
-
Which browsers does it work in?
-
Every modern browser. The effects use standard CSS features (transforms, sticky positioning, clip-path and masks) rather than a third-party animation library.
-
Does it respect the “reduce motion” accessibility setting?
-
Yes. If a visitor’s operating system is set to reduce motion, the runtime does not start any effect for them. Because no effect hides anything until it starts, those visitors simply get the page as ordinary static content — every panel visible and readable, just not animated. Clearing the setting starts the effects without needing a reload. The Studio editor itself always animates, since it is the tool you design the motion in.
-
Is there a paid version?
-
Yes, and it is entirely optional. A premium edition with six additional effects and a larger template library is sold separately by Innovate Web Development and installs alongside this one. Nothing in this plugin is locked, limited or time-restricted — everything described above is included and stays that way.
Reviews
There are no reviews for this plugin.
Contributors & Developers
“Innovate ScrollStage” is open source software. The following people have contributed to this plugin.
Contributors
Translate “Innovate ScrollStage” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
1.0.1
- Accessibility: the runtime now honours the operating system’s “reduce motion” setting. Visitors who have asked for reduced motion get the page as static, fully readable content — no scroll animation, and nothing hidden.
- Fixed: the “Open the Editor” button and link on the Settings screen pointed at an out-of-date menu slug, so clicking either returned “you are not allowed to access this page”. Both now open the Editor.
- Added: a Premium effects section in the Studio listing what the separately sold premium edition adds. Every entry is a link to that product page — nothing in this plugin is locked, and no licence check exists anywhere in it.
- Added: screenshots and a paid-version FAQ entry.
1.0.0
- Initial WordPress.org release: Studio editor, two scroll effects, Elementor / Gutenberg / WPBakery tagging, Minimal starter template, universal code export.