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.

Mitch

<p>The most lightweight WordPress solution for quick maintenances. This plugin adds a maintenance option to your settings menu.</p>
<p>Features:</p>
<ul>
<li>The admin bar maintenance button will become red to indicate that you have maintenance mode enabled so you’ll never forget to turn it off</li>
<li>Customize your own page – after that, you will be able to set it as your maintenance page</li>
<li>Administrators will still have access to the front-end of the website while the website is under maintenance</li>
<li>Lightweight, healthy code and very compact: that’s what makes this plugin so awesome!</li>
<li>Auto Disable (optional); Automatically turn off maintenance mode at the chosen date: you can also put the <code>easy-maintenance</code> shortcode in one of your pages to display the Auto Disable date to your visitors</li>
<li>Support for Genesis Framework and Contact Form 7: You are able to add a contact form to your maintenance page</li>
<li>This plugin will automatically use the style of your theme</li>
</ul>
<p>No premium versions, no advertisements or hidden credits. This plugin will always stay lightweight and there won’t be any unnecessary code and/or features added.</p>
<p>I appreciate your review!</p>


Easy Maintenance

The most lightweight WordPress solution for quick maintenances.

Shapes Smart Scroll Animations vs Easy Maintenance