Shapes Smart Scroll Animations vs Toolbelt

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: Card 1 Card 2 Card 3 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.

A collection of simple addons that provide every day functionality with privacy and speed. There’s very few options, and no unnecessary filler. It does exactly what it needs to do and nothing else. Toolbelt takes a privacy first approach to adding features. Everything happens on your server. No data is sent to third party servers without your explicit consent. No data is loaded from third parties (for example social sharing scripts). Taking inspiration from Jetpack I want to rebuild the features I use the most and make them as simple and fast as possible. Toolbelt has been featured on The WordPress Tavern in an interview with me. You can read more about the creation of the plugin and my desire for a more private internet. Gutenberg Blocks Some of the Toolbelt modules include blocks to make working with the generated content easier. The available blocks are: Contact Form – The simplest way to have people get in touch. Works with the spam module. Post Categories – A category content list for magazine and newspaper themes. Simple Slider – A fast, CSS powered slider. No JavaScript and easy to edit. Projects Grid – to list a collection of projects. These can be filtered by project category. Testimonials Grid – to list a group of testimonials. Great for showing off! 🙂 Markdown – for those who like a simpler writing experience. Sitemap – Easily list all posts, pages, Categories and Projects. Star Rating – Rate things with a simple visual interface. Breadcrumbs – for full site editing. Related posts – for full site editing. All Features Toolbelt has a lot of features. The complete list is below. Admin Interface Tweaks – Small CSS changes to make the interface nicer to use. Avatars – Algorithmicly generated private avatars that are consistent across websites. Breadcrumbs Contact Form – Gutenberg compatible & private. Supports the spam blocker module. Cookie Banner CSP Header Disable Comment Urls – Removes comments urls from your site. Disable REST API – Disable the REST API from public usage. Fast 404 – Stops WordPress from loading the full 404 page for images and other content. Reduces server usage. Footnotes Get Image – Find a featured image for posts that do not have one assigned. Heading Anchors – Add anchor names to headings so that they can be linked to. Iframe Privacy Shield – Remove iframes and add a clickable screen so that they load when the user wants to see them. Infinite Scroll Jetpack Dev Mode – Disable Jetpacks connection so that only local functions are enabled. Lazy Loading Layout Grid – A nicer columns block. Markdown Monetization – Enable Coil Web Monetization. OEmbed – Add additional OEmbed providers. Optimization – Remove WordPress features that are rarely used. Portfolio – Portfolio custom post type and blocks. Post Category – A post category block. Random Redirection – Randomly redirect to a blog post. Related Posts Remove IP Addresses – Remove IP addresses from comments for user privacy (spam protection still works). Responsive Videos Search Redirect – If there’s a single search result redirect to it instead of displaying the restuls. Sitemap – Sitemap block. Slider – JavaScript free CSS slider block. Social Menu – Replace social links with icons in navigation blocks. Spam Blocker – Privacy focused spam blocker. Static Social Sharing – Link to social sharing pages, and don’t load social network content on your site. Stats – Enable privacy focused analytics providers like Fathom. Testimonials – Testimonials Custom post types and blocks. Tidy Notifications – Move plugin and theme notifications to a sidebar. Typographic Widows – Remove widows in post titles. Widget Display – Set rules for widget visibility. Toolbelt is Private Every week there’s a new story about Facebook (or Google, or Amazon, or whoever) tracking people inappropriately, or selling user details. Or some security breach that leaks users passwords or credit card info. Privacy is a big topic and frankly, it’s scary how much big corporations like Google, Facebook, and Twitter know. To ensure Toolbelt is as privacy focused as possible it: Does not phone out. No data is shared with third parties. Does not use standard social sharing javascripts (loaded from social networks servers). Does not track your usage of the plugin. Does not add generator comments, or secret promotional comments to your site html. Toolbelt is Fast Slow websites make me sad. I don’t want to add anything to Toolbelt that will impact site load speed. My Google Pagespeed score should not move from 100. Why? Faster sites are shown to increase conversions and time on site. Google loves fast sites and improves their search rankings. In addition fast sites are great for people with slower internet access, or on mobile data, and use less resources to generate the page. So many benefits! To be fast Toolbelt: Doesn’t use jQuery or any other javascript framework. All javascript is vanilla js, and minified. Minifies all assets (JS and CSS). Loads all assets inline. They are already small, and loading them directly on the page means there are no server requests. Only loads things when they are needed. JS and CSS are only loaded for activated modules. Very few options. There’s one main database option, an array that stores what modules are active. And another that stores settings for some modules. Uses the minimum code possible. Minimum Javascript and PHP. Less code means more speed, and fewer bugs. All options are disabled by default. You enable only the ones you need. Built for developers Toolbelt is built with developers in mind. It has a collection of hooks and filters to enable you to make the modules work the way you want. If you’re intersted to jump in the project, there are opportunities for developers at all levels to help out. Contribute to Toolbelt on GitHub and join the party. 🎉 The code can be found on Github Documentation with code examples can be found on the wiki You can reach out to me with questions or problems on Twitter