[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$fP3VxvQqDvdDulBe9Lqy20a3cdsFohCYCgqCMdYz9q9c":3},{"slug":4,"display_name":4,"profile_url":5,"plugin_count":6,"total_installs":7,"avg_security_score":8,"avg_patch_time_days":9,"trust_score":10,"computed_at":11,"plugins":12},"lkdsgnr","https:\u002F\u002Fprofiles.wordpress.org\u002Flkdsgnr\u002F",1,0,100,30,94,"2026-05-20T06:03:50.192Z",[13],{"slug":14,"name":15,"version":16,"author":4,"author_profile":5,"description":17,"short_description":18,"active_installs":7,"downloaded":19,"rating":7,"num_ratings":7,"last_updated":20,"tested_up_to":21,"requires_at_least":22,"requires_php":23,"tags":24,"homepage":30,"download_link":31,"security_score":8,"vuln_count":7,"unpatched_count":7,"last_vuln_date":32,"fetched_at":33},"shapes-smart-scroll-animations","Shapes Smart Scroll Animations","1.0.7","\u003Cp>Shapes Smart Scroll Animations is a micro-tool designed for developers and designers who need clean entrance animations without external libraries.\u003C\u002Fp>\n\u003Cp>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.\u003C\u002Fp>\n\u003Ch3>How does it work?\u003C\u002Fh3>\n\u003Cp>Here is a deep dive into the technical advantages of Shapes Smart Scroll Animations plugin:\u003C\u002Fp>\n\u003Ch4>1. Smart Grid Delay logic\u003C\u002Fh4>\n\u003Cp>The core of this plugin is the \u003Ccode>calculateColumnsInGroup\u003C\u002Fcode> algorithm. Instead of forcing you to write complex media queries for animation delays, the plugin:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Dynamically checks the physical position (\u003Ccode>offsetTop\u003C\u002Fcode>) of elements.\u003C\u002Fli>\n\u003Cli>Detects when a new row begins.\u003C\u002Fli>\n\u003Cli>Resets the delay counter for every new row.\u003C\u002Fli>\n\u003Cli>Result: Animations look professional and perfectly staggered on any screen size automatically.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch4>2. Performance (Vanilla JS)\u003C\u002Fh4>\n\u003Cul>\n\u003Cli>\u003Cstrong>Zero Dependencies:\u003C\u002Fstrong> No jQuery, no GSAP, no heavy frameworks. The script is ultra-lightweight.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>IntersectionObserver API:\u003C\u002Fstrong> I use the modern browser API to detect scrolling, which is much more efficient than listening to the \u003Ccode>scroll\u003C\u002Fcode> event.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>GPU Acceleration:\u003C\u002Fstrong> CSS properties use \u003Ccode>will-change\u003C\u002Fcode> to inform the browser ahead of time, offloading rendering to the GPU for smooth animations.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch4>3. Accessibility first\u003C\u002Fh4>\n\u003Cp>This plugin automatically respects the user’s operating system preferences.\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>Reduced Motion Support:\u003C\u002Fstrong> 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.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Inclusive Design:\u003C\u002Fstrong> Your site remains compliant with modern web standards without extra work.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch4>4. Developer friendly\u003C\u002Fh4>\n\u003Cul>\n\u003Cli>\u003Cstrong>No-JS Fallback:\u003C\u002Fstrong> If JavaScript fails or is disabled, elements remain fully visible (opacity: 1). Your content is safe.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>CSS Variables:\u003C\u002Fstrong> I moved hardcoded values to CSS Custom Properties (\u003Ccode>:root\u003C\u002Fcode>). You can globally change animation duration, easing, or distance directly in your theme’s CSS without editing plugin files.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Simple Class System:\u003C\u002Fstrong> Just add \u003Ccode>.shps-animated\u003C\u002Fcode> and an effect class.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3>Available effects\u003C\u002Fh3>\n\u003Cul>\n\u003Cli>\u003Cstrong>Slide Up:\u003C\u002Fstrong> \u003Ccode>.shps-slide-up\u003C\u002Fcode> (Classic elegant entrance)\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Zoom Out:\u003C\u002Fstrong> \u003Ccode>.shps-zoom-out\u003C\u002Fcode> (Modern scaling effect)\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Slide Right:\u003C\u002Fstrong> \u003Ccode>.shps-slide-right\u003C\u002Fcode>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Slide Left:\u003C\u002Fstrong> \u003Ccode>.shps-slide-left\u003C\u002Fcode>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3>How to use?\u003C\u002Fh3>\n\u003Col>\n\u003Cli>\u003Cstrong>Single Element:\u003C\u002Fstrong> Add \u003Ccode>shps-animated shps-slide-up\u003C\u002Fcode> to any HTML element or Block.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Grid\u002FGroup:\u003C\u002Fstrong> Wrap elements in a container with class \u003Ccode>shps-group\u003C\u002Fcode> to enable the Smart Grid Delay.\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>\u003Cstrong>Example HTML:\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cpre>\u003Ccode>\u003Cdiv class=\"shps-group\">\n    \u003Cdiv class=\"shps-animated shps-slide-up\">Card 1\u003C\u002Fdiv>\n    \u003Cdiv class=\"shps-animated shps-slide-up\">Card 2\u003C\u002Fdiv>\n    \u003Cdiv class=\"shps-animated shps-slide-up\">Card 3\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>Manual delays & overrides\u003C\u002Fh3>\n\u003Cp>You have two ways to control delays manually if you want to highlight specific items.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Method 1: Helper Classes (Recommended for static HTML)\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cp>Use these classes to set a fixed delay. The plugin will detect them and skip the automatic calculation for that specific element.\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ccode>.shps-delay-100\u003C\u002Fcode> (0.1s) … to \u003Ccode>.shps-delay-1000\u003C\u002Fcode> (1.0s). Numeric values ​​in increments of 100.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cstrong>Method 2: CSS Overrides (Recommended for dynamic loops)\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cp>If you are generating lists via PHP (e.g., WordPress Loop) and cannot add specific classes to individual items, use CSS with \u003Ccode>!important\u003C\u002Fcode> to override the inline styles applied by the plugin.\u003C\u002Fp>\n\u003Cpre>\u003Ccode>\u002F* Example: Force 3rd item to wait 1 second *\u002F\n.shps-group .shps-animated:nth-child(3) {\n    transition-delay: 1.0s !important;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>Security & privacy\u003C\u002Fh3>\n\u003Cp>This plugin is designed to be safe and lightweight:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>100% GDPR Compliant:\u003C\u002Fstrong> No external calls, no tracking, no cookies, and no IP collection.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Zero Dependencies:\u003C\u002Fstrong> Written in pure Vanilla JS. No jQuery or external libraries that could cause conflicts.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Database Free:\u003C\u002Fstrong> The plugin does not perform any database queries (SQL), ensuring zero risk of injection attacks.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Self-Contained:\u003C\u002Fstrong> All assets are loaded locally. No reliance on external CDNs.\u003C\u002Fli>\n\u003C\u002Ful>\n","Add high-performance entrance animations with Smart Grid Delay logic. Zero dependencies, GPU accelerated, and Accessibility ready.",226,"2026-01-07T14:00:00.000Z","6.9.4","5.2","7.2",[25,26,27,28,29],"accessibility","animation","lightweight","performance","scroll","","https:\u002F\u002Fdownloads.wordpress.org\u002Fplugin\u002Fshapes-smart-scroll-animations.1.0.7.zip",null,"2026-04-16T10:56:18.058Z"]