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 takes a <strong>no-frills approach</strong> to smooth scrolling, providing a <strong>fast, performant, and accessible user experience</strong>.</p>
<p><strong>Simply enable the plugin</strong>, and any anchor links (i.e. links that point to other content on the same page) will provide a smooth scrolling experience rather than abruptly jumping to the destination content.</p>
<p>The plugin relies on the <strong>latest smooth scrolling techniques using CSS</strong>. A very <strong>fast and lightweight JavaScript polyfill (<1KB)</strong> is included to equally support older browsers, including Internet Explorer. So you can rest assured this plugin covers your userbase.</p>
<p><h4>Why does this plugin exist?</h4>
</p>
<p>Smooth scrolling is a basic feature to enhance user experience, so it shouldn’t come at a performance cost that at the same time harms user experience elsewhere.</p>
<p>Several other smooth scrolling solutions unfortunately rely on outdated techniques such as jQuery, which can hurt your site’s performance, and is really not necessary to provide the feature. Even browsers as old as 10 years don’t need jQuery to achieve smooth scrolling. In fact, as of today you can achieve the behavior with only CSS, not even requiring any JavaScript.</p>
<p>Another potential reason to use this plugin over other smooth scrolling solutions is accessibility: This plugin respects the user preferences around reduced motion, which can avoid discomfort for those with <a href="https://www.a11yproject.com/posts/understanding-vestibular-disorders/" rel="nofollow ugc">vestibular motion disorders</a>.</p>
<p>You may already use a smooth scrolling plugin, but it is worth double checking that it doesn’t use one of those outdated, inefficient, and inaccessible approaches that may slow down your site or affect user interactions negatively.</p>
<h4>More technical details</h4>
<p>This plugin simply enables smooth scrolling with the <code>scroll-behavior</code> CSS property. This property has been supported by all modern browsers for a few years now.</p>
<p>To support older browsers as well, a lightweight JavaScript polyfill is included, which is only loaded for browsers that lack support for the CSS property and doesn’t require any dependencies. The polyfill uses latest JavaScript user experience best practices such as <code>requestAnimationFrame</code> to provide a smooth scrolling experience without potentially blocking other user interactions.</p>
<p>For relevant browser support, see:<br />
* <a href="https://caniuse.com/css-scroll-behavior" rel="nofollow ugc">CSS Scroll-behavior</a><br />
* <a href="https://caniuse.com/mdn-css_properties_scroll-padding-top" rel="nofollow ugc">CSS property: scroll-padding-top</a><br />
* <a href="https://caniuse.com/prefers-reduced-motion" rel="nofollow ugc">prefers-reduced-motion media query</a><br />
* <a href="https://caniuse.com/requestanimationframe" rel="nofollow ugc">requestAnimationFrame</a><br />
* <a href="https://caniuse.com/high-resolution-time" rel="nofollow ugc">High Resolution Time API</a><br />
* <a href="https://caniuse.com/mdn-api_nodelist" rel="nofollow ugc">NodeList API</a><br />
* <a href="https://caniuse.com/mdn-api_window_scrollto" rel="nofollow ugc">Window API: scrollTo</a></p>


Fast Smooth Scroll

This lightweight plugin enhances user experience by enabling smooth scrolling for anchor links without the need for jQuery or other dependencies.

Shapes Smart Scroll Animations vs Fast Smooth Scroll