Shapes Smart Scroll Animations vs SimpleTOC – Table of Contents Block

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.

Add a Table of Contents block to your posts and pages. The TOC is a nested list of links to all heading found in the post or page. To use it, simply add a block and search for “SimpleTOC” or just “TOC”. The maximum depth of the toc can be configured in in the blocks’ sidebar among many other options. There can hide the headline “Table of Contents” and add your own by using a normal heading block. Spin up a new WordPress instance with the SimpleTOC plugin already installed. User Feedback “It is lightweight, stable, and fully compatible with WordPress Full Site Editing. A reliable solution that integrates seamlessly and performs exactly as expected.” — @js100 on wordpress.org “Does the job perfectly, and adds no bloat.” — @clicknathan on wordpress.org “Simple yet powerful. Great plugin that does exactly what you need.” — @mixey on wordpress.org Accessibility This plugin is designed & developed for WCAG 2.2 level AA conformance. The plugin is tested with assistive technology and intended to be accessible, however some third party plugins or themes may affect the individual accessibility on a given website. If you find an accessibility issue, please let us know and we’ll try to address it promptly. Hidden TOCs use native and semantics without extra ARIA references that require custom IDs. Features Designed for Gutenberg. Zero configuration: Add the SimpleTOC block to your post and that’s it. Minimal and valid HTML output. Utilizes the browser’s built-in details tag for a collapsible interface. No JavaScript or CSS by default. Optional features such as the accordion menu, smooth scrolling, or box style add minimal assets only when enabled. Optional Box style in Gutenberg’s Styles tab with a default gray background. Native text, link, background, spacing, and typography controls. Global block styling through theme.json. Inherits the style of your theme. Smooth scrolling effect using CSS. Accessibility built-in by following web standards. Standard Gutenberg block wrapper with navigation role and ARIA label attributes. Translated in multiple languages. Including German, Japanese, Chinese (Taiwan), Dutch, Brazilian Portuguese, French, Spanish and Latvia. Ideal for creating a Frequently Asked Questions section on your website. Customization Administrators can utilize global settings to supersede the individual block settings. Set text, link, and background colors in Gutenberg’s Styles tab. Native block support for wide and full width. Set vertical margins and padding with native spacing controls. Control the maximum depth of the headings. Choose between an ordered, bullet HTML list. Or indent the list. Select the Box style directly in Gutenberg’s Styles tab. Select a heading level or turn it into a paragraph. Disable the h2 heading of the TOC block and add your own. Compatibility GeneratePress and Rank Math support. Works with popular AMP plugins. How to contribute SimpleTOC is open-source and developed on GitHub Pages. If you find a bug or have an idea for a feature please feel free to contribute and create a pull request. Credits Many thanks to Tom J Nowell and and Sally CJ who both helped me a lot with my questions over at wordpress.stackexchange.com And many more thanks to all the developers on GitHub who helped me making SimpleTOC what it is today! Thanks to Quintus Valerius Soranus for inventing the Table of Contents around 100 BC.