lkdsgnr

<p>Shapes Smart Scroll Animations is a micro-tool designed for developers and designers who need clean entrance animations without external libraries.</p>
<p>This plugin uses a Smart Grid Delay logic to detect your layout structure and animate elements naturally, whether they are in a multi-column desktop grid or a single-column mobile view.</p>
<h3>How does it work?</h3>
<p>Here is a deep dive into the technical advantages of Shapes Smart Scroll Animations plugin:</p>
<h4>1. Smart Grid Delay logic</h4>
<p>The core of this plugin is the <code>calculateColumnsInGroup</code> algorithm. Instead of forcing you to write complex media queries for animation delays, the plugin:</p>
<ul>
<li>Dynamically checks the physical position (<code>offsetTop</code>) of elements.</li>
<li>Detects when a new row begins.</li>
<li>Resets the delay counter for every new row.</li>
<li>Result: Animations look professional and perfectly staggered on any screen size automatically.</li>
</ul>
<h4>2. Performance (Vanilla JS)</h4>
<ul>
<li><strong>Zero Dependencies:</strong> No jQuery, no GSAP, no heavy frameworks. The script is ultra-lightweight.</li>
<li><strong>IntersectionObserver API:</strong> I use the modern browser API to detect scrolling, which is much more efficient than listening to the <code>scroll</code> event.</li>
<li><strong>GPU Acceleration:</strong> CSS properties use <code>will-change</code> to inform the browser ahead of time, offloading rendering to the GPU for smooth animations.</li>
</ul>
<h4>3. Accessibility first</h4>
<p>This plugin automatically respects the user’s operating system preferences.</p>
<ul>
<li><strong>Reduced Motion Support:</strong> If a visitor has “Reduce Motion” enabled in their system (Windows, macOS, iOS, Android), the plugin automatically disables all entrance animations to prevent motion sickness.</li>
<li><strong>Inclusive Design:</strong> Your site remains compliant with modern web standards without extra work.</li>
</ul>
<h4>4. Developer friendly</h4>
<ul>
<li><strong>No-JS Fallback:</strong> If JavaScript fails or is disabled, elements remain fully visible (opacity: 1). Your content is safe.</li>
<li><strong>CSS Variables:</strong> I moved hardcoded values to CSS Custom Properties (<code>:root</code>). You can globally change animation duration, easing, or distance directly in your theme’s CSS without editing plugin files.</li>
<li><strong>Simple Class System:</strong> Just add <code>.shps-animated</code> and an effect class.</li>
</ul>
<h3>Available effects</h3>
<ul>
<li><strong>Slide Up:</strong> <code>.shps-slide-up</code> (Classic elegant entrance)</li>
<li><strong>Zoom Out:</strong> <code>.shps-zoom-out</code> (Modern scaling effect)</li>
<li><strong>Slide Right:</strong> <code>.shps-slide-right</code></li>
<li><strong>Slide Left:</strong> <code>.shps-slide-left</code></li>
</ul>
<h3>How to use?</h3>
<ol>
<li><strong>Single Element:</strong> Add <code>shps-animated shps-slide-up</code> to any HTML element or Block.</li>
<li><strong>Grid/Group:</strong> Wrap elements in a container with class <code>shps-group</code> to enable the Smart Grid Delay.</li>
</ol>
<p><strong>Example HTML:</strong></p>
<pre><code><div class="shps-group">
    <div class="shps-animated shps-slide-up">Card 1</div>
    <div class="shps-animated shps-slide-up">Card 2</div>
    <div class="shps-animated shps-slide-up">Card 3</div>
</div>
</code></pre>
<h3>Manual delays & overrides</h3>
<p>You have two ways to control delays manually if you want to highlight specific items.</p>
<p><strong>Method 1: Helper Classes (Recommended for static HTML)</strong></p>
<p>Use these classes to set a fixed delay. The plugin will detect them and skip the automatic calculation for that specific element.</p>
<ul>
<li><code>.shps-delay-100</code> (0.1s) … to <code>.shps-delay-1000</code> (1.0s). Numeric values ​​in increments of 100.</li>
</ul>
<p><strong>Method 2: CSS Overrides (Recommended for dynamic loops)</strong></p>
<p>If you are generating lists via PHP (e.g., WordPress Loop) and cannot add specific classes to individual items, use CSS with <code>!important</code> to override the inline styles applied by the plugin.</p>
<pre><code>/* Example: Force 3rd item to wait 1 second */
.shps-group .shps-animated:nth-child(3) {
    transition-delay: 1.0s !important;
}
</code></pre>
<h3>Security & privacy</h3>
<p>This plugin is designed to be safe and lightweight:</p>
<ul>
<li><strong>100% GDPR Compliant:</strong> No external calls, no tracking, no cookies, and no IP collection.</li>
<li><strong>Zero Dependencies:</strong> Written in pure Vanilla JS. No jQuery or external libraries that could cause conflicts.</li>
<li><strong>Database Free:</strong> The plugin does not perform any database queries (SQL), ensuring zero risk of injection attacks.</li>
<li><strong>Self-Contained:</strong> All assets are loaded locally. No reliance on external CDNs.</li>
</ul>


Shapes Smart Scroll Animations

Add high-performance entrance animations with Smart Grid Delay logic. Zero dependencies, GPU accelerated, and Accessibility ready.

WeDOK

<p><strong>Have you ever had multiple galleries on one page, only to find all the images mixed together in the slideshow?</strong></p>
<p>Most lightbox plugins treat every image on the page as one big group. The only way to separate them is to add shortcodes, manually set attributes, or dig into plugin settings. It works—but it’s a pain.</p>
<p><strong>WePOP solves this automatically.</strong></p>
<p>Place WordPress Gallery blocks as you normally would. WePOP detects each gallery independently and creates separate slideshows for each one—no extra steps required. Switch grouping modes with a single click in the settings screen.</p>
<p>This plugin was built by a web professional with 23 years of hands-on site-building experience. Every feature exists because it was needed in real production work.</p>
<h3>The Problem WePOP Solves</h3>
<p>Imagine a restaurant site with three galleries on one page: food, interior, and staff photos. With most lightbox plugins, clicking any image opens a slideshow that mixes all three groups together.</p>
<p>Fixing that usually means:<br />
* Adding <code>rel</code> attributes to every image manually<br />
* Writing shortcodes around each gallery<br />
* Installing a separate gallery management plugin</p>
<p>With WePOP, you don’t do any of that. The Gallery block structure you already built is all it needs.</p>
<h3>What Makes WePOP Different</h3>
<p><strong>Gutenberg-native grouping — no manual work</strong><br />
WePOP reads your Gallery blocks as distinct groups. Each gallery gets its own slideshow automatically. One click in the settings switches between three modes:<br />
* <strong>Gallery Blocks Mode</strong> — each Gallery block is its own slideshow (recommended)<br />
* <strong>All Images Mode</strong> — all images on the page grouped together<br />
* <strong>No Grouping Mode</strong> — every image opens individually</p>
<p><strong>MP4 video popups — no YouTube required</strong><br />
Host your own product demos, property tours, or company introduction videos. WePOP opens MP4 files directly in an overlay—no uploading to YouTube or Vimeo, no embedding restrictions, no third-party branding. YouTube and Vimeo are also supported when you need them.</p>
<p><strong>Reacts only to media links</strong><br />
WePOP only activates on links that point to image or video files. Navigation links, buttons, and logos are completely ignored—no false triggers, no need to manually exclude things.</p>
<p><strong>Captions that don’t cover your photos</strong><br />
Alt text captions appear in a dedicated strip below the image, not overlaid on top. On portrait shots and tall images, your photo stays fully visible. In slideshow mode, captions slide in sync with each image.</p>
<p><strong>Per-image disable toggle</strong><br />
Need one specific image to open in a new tab instead of a popup? Flip the toggle in the image block sidebar. No code, no class names to remember.</p>
<p><strong>Keyboard and accessibility ready</strong><br />
Escape closes any popup. Arrow keys navigate galleries. All controls include proper labels for screen readers. Works well for corporate, government, and accessibility-conscious projects.</p>
<h3>Supported Media</h3>
<ul>
<li>Images: jpg, jpeg, png, gif, webp, svg</li>
<li>Video services: YouTube, Vimeo</li>
<li>Direct video files: MP4</li>
</ul>
<h3>Who It’s For</h3>
<ul>
<li><strong>Photographers and portfolio sites</strong> — multiple series on one page, each staying in its own slideshow</li>
<li><strong>Restaurants and hotels</strong> — food, interior, and room galleries that don’t mix</li>
<li><strong>Businesses</strong> — product or service videos hosted on your own server</li>
<li><strong>Web designers and agencies</strong> — a reliable, low-maintenance lightbox that works across client sites without conflicts</li>
</ul>
<h3>Built Without Baggage</h3>
<p>No jQuery. No front-end framework. WePOP runs on plain JavaScript, which means it doesn’t conflict with your theme or other plugins, and it won’t slow your site down. Core Web Vitals stay clean.</p>
<h3>Documentation & Support</h3>
<ul>
<li><a href="https://wedok.jp/tools/wepop/" rel="nofollow ugc">Official documentation (Japanese)</a></li>
</ul>
<h3>Popup Trigger Rules</h3>
<p>WePOP activates only on links that point directly to supported media files or video URLs. Regular links, navigation, and non-media elements are not affected.</p>
<p><strong>Supported media types:</strong><br />
* Image files: jpg, jpeg, png, gif, webp, svg<br />
* Video services: YouTube, Vimeo<br />
* Direct video files: MP4</p>
<p><strong>Where links are detected:</strong><br />
* <strong>Default</strong>: On posts and static pages, WePOP looks inside the main content area only (<code><main></code>, <code>.entry-content</code>, or <code>#content</code>). Header, footer, and sidebars are not included.<br />
* <strong>Extended</strong>: Enable <strong>Front page & blog home</strong> in settings to also load on the front page and blog index, and to detect links across the entire page on posts and pages.<br />
* <strong>Manual exclusion</strong>: Add the <code>wepop-disable</code> class to any link or wrapper element to skip it.</p>
<h3>Popup Mode Settings</h3>
<ul>
<li><strong>Gallery Blocks Mode</strong> — Images inside each Gallery block form their own independent slideshow. Images outside gallery blocks open individually. This is the recommended setting for most sites.</li>
<li><strong>All Images Mode</strong> — All qualifying images within the detection scope are grouped into one slideshow.</li>
<li><strong>No Grouping Mode</strong> — Every image opens in its own popup with no navigation.</li>
</ul>
<h3>Language Support</h3>
<p>Admin interface is available in: Japanese, English, Spanish, French, German, Chinese (Simplified), Italian, Korean, Portuguese (Brazil).</p>
<h3>Feedback</h3>
<p>If WePOP saves you time on a project, a quick rating on <a href="https://wordpress.org/plugins/wepop/" rel="ugc">WordPress.org</a> goes a long way. It helps other site owners find it and supports continued development. Thank you.</p>


WePOP

The lightbox that just works. Place your Gallery blocks—WePOP handles the rest. No shortcodes, no manual settings, no mixed-up slideshows.

Shapes Smart Scroll Animations vs WePOP