Shapes Smart Scroll Animations is a micro-tool designed for developers and designers who need clean entrance animations without external libraries.<\/p>\n\n
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.<\/p>\n\n
Here is a deep dive into the technical advantages of Shapes Smart Scroll Animations plugin:<\/p>\n\n
The core of this plugin is the This plugin automatically respects the user's operating system preferences.<\/p>\n\n Example HTML:<\/strong><\/p>\n\n You have two ways to control delays manually if you want to highlight specific items.<\/p>\n\n Method 1: Helper Classes (Recommended for static HTML)<\/strong><\/p>\n\n Use these classes to set a fixed delay. The plugin will detect them and skip the automatic calculation for that specific element.<\/p>\n\n Method 2: CSS Overrides (Recommended for dynamic loops)<\/strong><\/p>\n\n If you are generating lists via PHP (e.g., WordPress Loop) and cannot add specific classes to individual items, use CSS with This plugin is designed to be safe and lightweight:<\/p>\n\n You can override the default settings using CSS Variables in your theme's stylesheet (Appearance > Customize > Additional CSS):<\/p>\n\n Please check your system Accessibility settings. If \"Reduce Motion\" is turned on, the plugin intentionally disables animations to provide an accessible experience.<\/p><\/dd>\n\n<\/dl>\n\n\ncalculateColumnsInGroup<\/code> algorithm. Instead of forcing you to write complex media queries for animation delays, the plugin:<\/p>\n\n\n
offsetTop<\/code>) of elements.<\/li>\n2. Performance (Vanilla JS)<\/h4>\n\n
\n
scroll<\/code> event.<\/li>\nwill-change<\/code> to inform the browser ahead of time, offloading rendering to the GPU for smooth animations.<\/li>\n<\/ul>\n\n3. Accessibility first<\/h4>\n\n
\n
4. Developer friendly<\/h4>\n\n
\n
:root<\/code>). You can globally change animation duration, easing, or distance directly in your theme's CSS without editing plugin files.<\/li>\n.shps-animated<\/code> and an effect class.<\/li>\n<\/ul>\n\nAvailable effects<\/h3>\n\n
\n
.shps-slide-up<\/code> (Classic elegant entrance)<\/li>\n.shps-zoom-out<\/code> (Modern scaling effect)<\/li>\n.shps-slide-right<\/code><\/li>\n.shps-slide-left<\/code><\/li>\n<\/ul>\n\nHow to use?<\/h3>\n\n
\n
shps-animated shps-slide-up<\/code> to any HTML element or Block.<\/li>\nshps-group<\/code> to enable the Smart Grid Delay.<\/li>\n<\/ol>\n\n<div class=\"shps-group\">\n <div class=\"shps-animated shps-slide-up\">Card 1<\/div>\n <div class=\"shps-animated shps-slide-up\">Card 2<\/div>\n <div class=\"shps-animated shps-slide-up\">Card 3<\/div>\n<\/div>\n<\/code><\/pre>\n\nManual delays & overrides<\/h3>\n\n
\n
.shps-delay-100<\/code> (0.1s) ... to .shps-delay-1000<\/code> (1.0s). Numeric values \u200b\u200bin increments of 100.<\/li>\n<\/ul>\n\n!important<\/code> to override the inline styles applied by the plugin.<\/p>\n\n\/* Example: Force 3rd item to wait 1 second *\/\n.shps-group .shps-animated:nth-child(3) {\n transition-delay: 1.0s !important;\n}\n<\/code><\/pre>\n\nSecurity & privacy<\/h3>\n\n
\n
\n
\/wp-content\/plugins\/shapes-smart-scroll-animations<\/code> directory, or install the plugin through the WordPress plugins screen directly.<\/li>\n\n
How can I change the animation speed?<\/h3><\/dt>\n
:root {\n --shps-duration: 0.6s; \/* Default: 0.8s *\/\n --shps-ease: cubic-bezier(0.25, 1, 0.5, 1); \/* Custom easing *\/\n --shps-distance: 30px; \/* Default: 50px *\/\n}\n<\/code><\/pre><\/dd>\nWhy are animations not working on my device?<\/h3><\/dt>\n
1.0.7<\/h4>\n\n
\n
1.0.6<\/h4>\n\n
\n
1.0.5<\/h4>\n\n
\n
1.0.4<\/h4>\n\n
\n
1.0.3<\/h4>\n\n
\n
1.0.2<\/h4>\n\n
\n
1.0.1<\/h4>\n\n
\n
1.0.0<\/h4>\n\n
\n