Title: Shapes Smart Scroll Animations
Author: lkdsgnr
Published: Ionawr 1, 2026
Last modified: Ionawr 7, 2026
---
Search plugins
# Shapes Smart Scroll Animations
Gan [lkdsgnr](https://profiles.wordpress.org/lkdsgnr/)
[Llwytho i lawr](https://downloads.wordpress.org/plugin/shapes-smart-scroll-animations.1.0.7.zip)
* [Details](https://cy.wordpress.org/plugins/shapes-smart-scroll-animations/#description)
* [Reviews](https://cy.wordpress.org/plugins/shapes-smart-scroll-animations/#reviews)
* [Installation](https://cy.wordpress.org/plugins/shapes-smart-scroll-animations/#installation)
* [Development](https://cy.wordpress.org/plugins/shapes-smart-scroll-animations/#developers)
[Cefnogaeth](https://wordpress.org/support/plugin/shapes-smart-scroll-animations/)
## Disgrifiad
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?
1. **Single Element:** Add `shps-animated shps-slide-up` to any HTML element or Block.
2. **Grid/Group:** Wrap elements in a container with class `shps-group` to enable
the Smart Grid Delay.
**Example HTML:**
```
```
### 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.
* `.shps-delay-100` (0.1s) … to `.shps-delay-1000` (1.0s). Numeric values in
increments of 100.
**Method 2: CSS Overrides (Recommended for dynamic loops)**
If you are generating lists via PHP (e.g., WordPress Loop) and cannot add specific
classes to individual items, use CSS with `!important` to override the inline styles
applied by the plugin.
```
/* Example: Force 3rd item to wait 1 second */
.shps-group .shps-animated:nth-child(3) {
transition-delay: 1.0s !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.
## Lluniau Sgrin
* [[
* Visual explanation of how “Zoom Out” animations works.
* [[
* Visual explanation of how “Slide Up” animations works.
## Gosod
1. Upload the plugin files to the `/wp-content/plugins/shapes-smart-scroll-animations`
directory, or install the plugin through the WordPress plugins screen directly.
2. Activate the plugin through the ‘Plugins’ screen in WordPress.
3. Add the CSS classes to your HTML or page builder elements.
## Cwestiynau Cyffredin
### How can I change the animation speed?
You can override the default settings using CSS Variables in your theme’s stylesheet(
Appearance > Customize > Additional CSS):
```
:root {
--shps-duration: 0.6s; /* Default: 0.8s */
--shps-ease: cubic-bezier(0.25, 1, 0.5, 1); /* Custom easing */
--shps-distance: 30px; /* Default: 50px */
}
```
### Why are animations not working on my device?
Please check your system Accessibility settings. If “Reduce Motion” is turned on,
the plugin intentionally disables animations to provide an accessible experience.
## Adolygiadau
There are no reviews for this plugin.
## Contributors & Developers
“Shapes Smart Scroll Animations” is open source software. The following people have
contributed to this plugin.
Cyfranwyr
* [ lkdsgnr ](https://profiles.wordpress.org/lkdsgnr/)
[Translate “Shapes Smart Scroll Animations” into your language.](https://translate.wordpress.org/projects/wp-plugins/shapes-smart-scroll-animations)
### Interested in development?
[Browse the code](https://plugins.trac.wordpress.org/browser/shapes-smart-scroll-animations/),
check out the [SVN repository](https://plugins.svn.wordpress.org/shapes-smart-scroll-animations/),
or subscribe to the [development log](https://plugins.trac.wordpress.org/log/shapes-smart-scroll-animations/)
by [RSS](https://plugins.trac.wordpress.org/log/shapes-smart-scroll-animations/?limit=100&mode=stop_on_copy&format=rss).
## Cofnod Newid
#### 1.0.7
* Minor performance improvements.
#### 1.0.6
* readme.txt file corrections.
#### 1.0.5
* readme.txt file corrections.
#### 1.0.4
* readme.txt file corrections.
#### 1.0.3
* readme.txt file corrections.
#### 1.0.2
* readme.txt file corrections.
#### 1.0.1
* readme.txt file corrections.
#### 1.0.0
* Initial public release.
* Features: Smart Grid Delay, CSS Variables, No-JS fallback.
## Meta
* Version **1.0.7**
* Last updated **3 mis yn ôl**
* Active installations **Fewer than 10**
* WordPress version ** 5.2 neu uwch **
* Tested up to **6.9.4**
* PHP version ** 7.2 neu uwch **
* Language
* [English (US)](https://wordpress.org/plugins/shapes-smart-scroll-animations/)
* Tags
* [accessibility](https://cy.wordpress.org/plugins/tags/accessibility/)[animation](https://cy.wordpress.org/plugins/tags/animation/)
[lightweight](https://cy.wordpress.org/plugins/tags/lightweight/)[performance](https://cy.wordpress.org/plugins/tags/performance/)
[scroll](https://cy.wordpress.org/plugins/tags/scroll/)
* [Advanced View](https://cy.wordpress.org/plugins/shapes-smart-scroll-animations/advanced/)
## Graddau
No reviews have been submitted yet.
[Your review](https://wordpress.org/support/plugin/shapes-smart-scroll-animations/reviews/#new-post)
[See all reviews](https://wordpress.org/support/plugin/shapes-smart-scroll-animations/reviews/)
## Cyfranwyr
* [ lkdsgnr ](https://profiles.wordpress.org/lkdsgnr/)
## Cefnogaeth
Rhywbeth i’w ddweud? Angen help?
[Gweld y fforwm cefnogi](https://wordpress.org/support/plugin/shapes-smart-scroll-animations/)