Shapes Smart Scroll Animations

Shapes Smart Scroll Animations is a micro-tool designed for developers and designers who need clean entrance animations without external libraries.

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.

How does it work?

Here is a deep dive into the technical advantages of Shapes Smart Scroll Animations plugin:

1. Smart Grid Delay logic

The core of this plugin is the calculateColumnsInGroup algorithm. Instead of forcing you to write complex media queries for animation delays, the plugin:

• Dynamically checks the physical position ( offsetTop ) of elements.

• Detects when a new row begins.

• Resets the delay counter for every new row.

• Result: Animations look professional and perfectly staggered on any screen size automatically.

2. Performance (Vanilla JS)

• Zero Dependencies: No jQuery, no GSAP, no heavy frameworks. The script is ultra-lightweight.

• IntersectionObserver API: I use the modern browser API to detect scrolling, which is much more efficient than listening to the scroll event.

• GPU Acceleration: CSS properties use will-change to inform the browser ahead of time, offloading rendering to the GPU for smooth animations.

3. Accessibility first

This plugin automatically respects the user’s operating system preferences.

• Reduced Motion Support: 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.

• Inclusive Design: Your site remains compliant with modern web standards without extra work.

4. Developer friendly

• No-JS Fallback: If JavaScript fails or is disabled, elements remain fully visible (opacity: 1). Your content is safe.

• CSS Variables: I moved hardcoded values to CSS Custom Properties (:root ). You can globally change animation duration, easing, or distance directly in your theme’s CSS without editing plugin files.

• Simple Class System: Just add.shps-animated and an effect class.

Available effects

• Slide Up:.shps-slide-up (Classic elegant entrance)

• Zoom Out:.shps-zoom-out (Modern scaling effect)

• Slide Right:.shps-slide-right

• Slide Left:.shps-slide-left

How to use?

• Single Element: Add shps-animated shps-slide-up to any HTML element or Block.

• Grid/Group: Wrap elements in a container with class shps-group to enable the Smart Grid Delay.

Example HTML:

<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>

Manual delays & overrides

You have two ways to control delays manually if you want to highlight specific items.

Method 1: Helper Classes (Recommended for static HTML)

Use these classes to set a fixed delay. The plugin will detect them and skip the automatic calculation for that specific element.

0s). Numeric values ​​in increments of 100.

Method 2: CSS Overrides (Recommended for dynamic loops)

important to override the inline styles applied by the plugin.

important; }

Security & privacy

This plugin is designed to be safe and lightweight:

• 100% GDPR Compliant: No external calls, no tracking, no cookies, and no IP collection.

• Zero Dependencies: Written in pure Vanilla JS. No jQuery or external libraries that could cause conflicts.

• Database Free: The plugin does not perform any database queries (SQL), ensuring zero risk of injection attacks.

• Self-Contained: All assets are loaded locally. No reliance on external CDNs.