{"id":353850,"date":"2026-08-15T21:08:47","date_gmt":"2026-08-15T21:08:47","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/scroll-studio\/"},"modified":"2026-08-16T21:04:18","modified_gmt":"2026-08-16T21:04:18","slug":"innovate-scrollstage","status":"publish","type":"plugin","link":"https:\/\/wordpress.org\/plugins\/innovate-scrollstage\/","author":11906043,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"1.0.1","stable_tag":"1.0.1","tested":"7.0.4","requires":"5.9","requires_php":"7.2","requires_plugins":null,"header_name":"Innovate ScrollStage","header_author":"Innovate Web Development","header_description":"Visual scroll-effect studio for WordPress. Design motion with the built-in editor, then copy and paste your code into your favorite editor. One plugin, pick your builder in Settings.","assets_banners_color":"251d2c","last_updated":"2026-08-16 21:04:18","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"https:\/\/ss.innovatewebdevelopment.com\/","header_author_uri":"https:\/\/innovatewebdevelopment.com","rating":0,"author_block_rating":0,"active_installs":0,"downloads":52,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0.0":{"tag":"1.0.0","author":"webphilosopher","date":"2026-08-15 21:08:24"},"1.0.1":{"tag":"1.0.1","author":"webphilosopher","date":"2026-08-16 21:04:18"}},"upgrade_notice":{"1.0.1":"<p>Fixes a broken Editor link on the Settings screen and adds support for the OS &quot;reduce motion&quot; accessibility setting.<\/p>","1.0.0":"<p>Initial release.<\/p>"},"ratings":[],"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3649147,"resolution":"128x128","location":"assets","locale":"","width":128,"height":128},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3649147,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3649147,"resolution":"1544x500","location":"assets","locale":"","width":1544,"height":500},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3649147,"resolution":"772x250","location":"assets","locale":"","width":772,"height":250}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0.0","1.0.1"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3650188,"resolution":"1","location":"assets","locale":"","width":1890,"height":838},"screenshot-2.png":{"filename":"screenshot-2.png","revision":3650188,"resolution":"2","location":"assets","locale":"","width":1881,"height":848}},"screenshots":{"1":"The Studio editor. Pick an effect, tune its parameters against the live preview, and watch the change apply instantly.","2":"The recipe panel. Copy the motion recipe \u2014 a small JSON string \u2014 or export starter markup, then paste it into your page builder."}},"plugin_section":[],"plugin_tags":[785,76538,148076,790,250933],"plugin_category":[50],"plugin_contributors":[275894],"plugin_business_model":[],"class_list":["post-353850","plugin","type-plugin","status-publish","hentry","plugin_tags-animation","plugin_tags-elementor","plugin_tags-gutenberg","plugin_tags-scroll","plugin_tags-scroll-effects","plugin_category-media","plugin_contributors-webphilosopher","plugin_committers-webphilosopher"],"banners":{"banner":"https:\/\/ps.w.org\/innovate-scrollstage\/assets\/banner-772x250.png?rev=3649147","banner_2x":"https:\/\/ps.w.org\/innovate-scrollstage\/assets\/banner-1544x500.png?rev=3649147","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/innovate-scrollstage\/assets\/icon-128x128.png?rev=3649147","icon_2x":"https:\/\/ps.w.org\/innovate-scrollstage\/assets\/icon-256x256.png?rev=3649147","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/innovate-scrollstage\/assets\/screenshot-1.png?rev=3650188","caption":"The Studio editor. Pick an effect, tune its parameters against the live preview, and watch the change apply instantly."},{"src":"https:\/\/ps.w.org\/innovate-scrollstage\/assets\/screenshot-2.png?rev=3650188","caption":"The recipe panel. Copy the motion recipe \u2014 a small JSON string \u2014 or export starter markup, then paste it into your page builder."}],"raw_content":"<!--section=description-->\n<p>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 \u2014 Elementor, the block editor (Gutenberg), or hand-coded HTML.<\/p>\n\n<p>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.<\/p>\n\n<p><strong>What you get<\/strong><\/p>\n\n<ul>\n<li>A built-in <strong>Studio editor<\/strong> (WP Admin \u2192 Innovate ScrollStage \u2192 Editor): pick an effect, tune its parameters live, preview it, and copy the recipe or export starter markup.<\/li>\n<li><strong>Two scroll effects<\/strong> \u2014 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).<\/li>\n<li><strong>Native tagging for your builder.<\/strong> Choose your builder under Settings and Innovate ScrollStage adds simple role\/recipe controls, so you can turn your <em>own<\/em> containers into a scroll stage using the builder edition you already run.<\/li>\n<li><strong>A starter template<\/strong> (Minimal) to drop in and edit natively.<\/li>\n<li><strong>Universal code export<\/strong> that works in any builder with a raw-HTML\/embed widget.<\/li>\n<\/ul>\n\n<p><strong>How it works<\/strong><\/p>\n\n<ol>\n<li>Open the Studio editor and design an effect.<\/li>\n<li>Copy the recipe (a small JSON string).<\/li>\n<li>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.<\/li>\n<\/ol>\n\n<p><strong>Supported builders<\/strong><\/p>\n\n<ul>\n<li>Elementor \u2014 native \"Innovate ScrollStage\" controls on containers\/sections\/columns.<\/li>\n<li>Gutenberg (block editor) \u2014 a \"Innovate ScrollStage\" inspector panel on Group\/Columns\/Cover blocks, plus a block pattern.<\/li>\n<li>WPBakery \u2014 paste the Studio's code export into a Raw HTML element, or use the \"Innovate ScrollStage\" fields on rows and columns.<\/li>\n<li>Any other builder with a raw-HTML\/embed widget \u2014 paste the same code export.<\/li>\n<\/ul>\n\n<p><strong>Open source runtime<\/strong><\/p>\n\n<p>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.<\/p>\n\n<p>No code is minified or obfuscated in a way that hides its source. The front-end runtime ships twice: <code>assets\/scroll-studio.js<\/code> is the plain, human-readable build, and <code>assets\/scroll-studio.min.js<\/code> is the same code minified for production. Both are produced by esbuild from the readable engine modules included in this plugin at <code>app\/packages\/engine\/<\/code>. Every other script and stylesheet ships unminified, and the plugin loads no code from any remote server or CDN.<\/p>\n\n<!--section=installation-->\n<ol>\n<li>Upload the <code>innovate-scrollstage<\/code> folder to <code>\/wp-content\/plugins\/<\/code>, or install the plugin through the Plugins screen in WordPress.<\/li>\n<li>Activate the plugin.<\/li>\n<li>Go to <strong>Innovate ScrollStage \u2192 Settings<\/strong> and select the page builder(s) you use.<\/li>\n<li>Open <strong>Innovate ScrollStage \u2192 Editor<\/strong> to design your first effect.<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id=\"do%20i%20need%20a%20paid%20edition%20of%20my%20page%20builder%3F\"><h3>Do I need a paid edition of my page builder?<\/h3><\/dt>\n<dd><p>No. Builders differ in whether their free edition lets you put custom attributes on an element \u2014 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.<\/p><\/dd>\n<dt id=\"what%20does%20it%20add%20to%20my%20pages%3F\"><h3>What does it add to my pages?<\/h3><\/dt>\n<dd><p>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.<\/p><\/dd>\n<dt id=\"will%20it%20slow%20down%20my%20site%3F\"><h3>Will it slow down my site?<\/h3><\/dt>\n<dd><p>The runtime is a single small script that only initializes on pages that actually use an Innovate ScrollStage recipe, and it is event-driven \u2014 it does no work while the page is still.<\/p><\/dd>\n<dt id=\"does%20it%20load%20anything%20from%20an%20external%20server%3F\"><h3>Does it load anything from an external server?<\/h3><\/dt>\n<dd><p>No. The runtime ships with the plugin and no external script, font or service is requested.<\/p><\/dd>\n<dt id=\"which%20browsers%20does%20it%20work%20in%3F\"><h3>Which browsers does it work in?<\/h3><\/dt>\n<dd><p>Every modern browser. The effects use standard CSS features (transforms, sticky positioning, clip-path and masks) rather than a third-party animation library.<\/p><\/dd>\n<dt id=\"does%20it%20respect%20the%20%22reduce%20motion%22%20accessibility%20setting%3F\"><h3>Does it respect the \"reduce motion\" accessibility setting?<\/h3><\/dt>\n<dd><p>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 \u2014 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.<\/p><\/dd>\n<dt id=\"is%20there%20a%20paid%20version%3F\"><h3>Is there a paid version?<\/h3><\/dt>\n<dd><p>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 \u2014 everything described above is included and stays that way.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>1.0.1<\/h4>\n\n<ul>\n<li>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 \u2014 no scroll animation, and nothing hidden.<\/li>\n<li>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.<\/li>\n<li>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 \u2014 nothing in this plugin is locked, and no licence check exists anywhere in it.<\/li>\n<li>Added: screenshots and a paid-version FAQ entry.<\/li>\n<\/ul>\n\n<h4>1.0.0<\/h4>\n\n<ul>\n<li>Initial WordPress.org release: Studio editor, two scroll effects, Elementor \/ Gutenberg \/ WPBakery tagging, Minimal starter template, universal code export.<\/li>\n<\/ul>","raw_excerpt":"Design motion with the built-in editor, then copy and paste your code into your favorite editor.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/353850","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=353850"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/webphilosopher"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=353850"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=353850"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=353850"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=353850"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=353850"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=353850"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}