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.

Felix Arntz

<p>This plugin adds a subtle snow fall effect to your website, using the lightweight <code><snow-fall></code> JavaScript web component by <a href="https://www.zachleat.com" rel="nofollow ugc">Zach Leatherman</a>.</p>
<ul>
<li><a href="https://www.zachleat.com/web/snow-fall" rel="nofollow ugc">Learn more about the <code><snow-fall></code> component</a></li>
<li><a href="https://zachleat.github.io/snow-fall/demo.html" rel="nofollow ugc">Demo of the <code><snow-fall></code> component</a></li>
</ul>
<p>The plugin takes a no-frills, zero-config approach – you simply activate the plugin, and it just works – thanks to the excellent underlying web component implementation. There should be no notable adverse effects on performance, also given the plugin uses the <a href="https://make.wordpress.org/core/2024/03/04/script-modules-in-6-5/" rel="nofollow ugc">WordPress Script Modules API</a> that was introduced in WordPress 6.5.</p>
<p>The plugin respects user preferences for reduced motion, as a best practice for accessibility.</p>
<p>Additional credit: <a href="https://unsplash.com/photos/snow-field-and-green-pine-trees-during-daytime-IWenq-4JHqo" rel="nofollow ugc">Banner image by Adam Chang</a></p>
<h4>License</h4>
<p>The Snow Fall plugin is <a href="https://www.gnu.org/licenses/gpl-2.0.html" rel="nofollow ugc">licensed under the GPLv2 (or later)</a>.</p>
<p>The <code><snow-fall></code> and <code><is-land></code> web components are <a href="https://opensource.org/license/mit" rel="nofollow ugc">licensed under the MIT license</a>.</p>
<p>See their source code on GitHub:</p>
<ul>
<li><a href="https://github.com/zachleat/snow-fall" rel="nofollow ugc"><code>zachleat/snow-fall</code></a></li>
<li><a href="https://github.com/11ty/is-land" rel="nofollow ugc"><code>11ty/is-land</code></a></li>
</ul>


Snow Fall

Adds a subtle snow fall effect to your website, using a lightweight web component.

Shapes Smart Scroll Animations vs Snow Fall