Scroll Animations
Scroll Animations images
30 days return right
Easy return - no questions asked
Plug & Play Modules
Install, set up and take profit
Dedicated Support First
Priority Help & Satisfaction Over Sales
Scroll Animations
Fade-In, Slide & Zoom Animations Triggered on Scroll — Zero jQuery
Price:
€49.00
Tax excluded
Bring your store to life with smooth, performance-optimized scroll-triggered animations. Elements fade in, slide up, zoom, and reveal as customers scroll down the page — creating a modern, engaging browsing experience that keeps visitors scrolling and exploring. Built on the IntersectionObserver API for native browser performance with zero jQuery dependency.
- Multiple animation effects — fade, slide-up, slide-down, slide-left, slide-right, zoom-in, zoom-out, flip
- CSS class targeting — apply animations to any element on any page by specifying its CSS selector
- IntersectionObserver-powered — native browser API for buttery-smooth performance, no scroll event listeners
- No jQuery dependency — pure vanilla JavaScript, under 3 KB minified
- Configurable triggers — threshold, delay, duration, and easing per animation target
- Mobile-aware — optionally disable animations on mobile devices to prioritize speed
Stop presenting a static, lifeless store. Scroll animations add perceived quality and professionalism that customers associate with premium brands. $49 for a permanent, unlimited-use license. Compatible with PrestaShop 1.7, 8.x, and 9.x.
Modern Stores Move — Static Stores Get Ignored
The most engaging websites in the world — Apple, Nike, Tesla, Airbnb — all use scroll-triggered animations to create a sense of dynamism and discovery. As visitors scroll, elements reveal themselves with subtle fades, slides, and zooms that draw attention, create visual hierarchy, and make the browsing experience feel alive.
The Scroll Animations module brings this same level of polish to your PrestaShop store. Products fade into view as customers scroll through category listings. Feature sections slide up on your homepage. Trust badges zoom into place. Promotional banners reveal from the side. Every scroll becomes an experience, and that experience keeps customers engaged longer — which means more pages viewed, more products discovered, and more sales.
Rich Animation Library
The module includes a comprehensive set of animation effects, each carefully tuned for e-commerce contexts:
- Fade In — elements transition from transparent to fully visible; the most subtle and universally appropriate effect
- Slide Up — elements move upward into their final position while fading in; perfect for product cards and content blocks
- Slide Down — elements descend into position; effective for headers and announcement bars
- Slide Left / Slide Right — horizontal entrance from either direction; ideal for alternating content sections
- Zoom In — elements scale from smaller to full size while fading in; draws attention to key elements like CTAs
- Zoom Out — elements scale from larger to normal size; creates a dramatic reveal effect
- Flip — 3D rotation entrance; eye-catching for badges, icons, and special offers
Each animation can be further customized with:
- Duration — how long the animation takes (200ms to 2000ms)
- Delay — time before the animation starts after the element enters the viewport
- Easing — the acceleration curve (ease, ease-in, ease-out, ease-in-out, linear, or custom cubic-bezier)
- Distance — how far slide animations travel (20px to 200px)
Precise CSS Selector Targeting
The module's power lies in its targeting system. Instead of requiring you to edit template files or add custom HTML attributes, you simply specify CSS selectors in the back office configuration, and the module automatically applies animations to all matching elements:
.product-miniature— animate all product cards on category pages.featured-products .product-miniature— animate only featured products on the homepage#content .cms-block— animate CMS content blocks.reassurance-item— animate reassurance/trust badge items.banner-img— animate promotional banner images.testimonial-card— animate customer testimonial sections
You can create multiple animation rules, each with a different selector and effect. This gives you complete control over which elements animate and how — all from the back office, no code editing required.
IntersectionObserver — The Performance-Correct Approach
Many scroll animation libraries (AOS, ScrollReveal, WOW.js) attach listeners to the scroll event, which fires dozens of times per second as the user scrolls. This approach is inherently expensive — each scroll event triggers JavaScript calculations that can cause visible stutter and jank, especially on mobile devices.
This module uses the IntersectionObserver API instead — a native browser API specifically designed for efficiently detecting when elements enter or exit the viewport. The key differences:
- No scroll event listeners — the browser handles viewport detection natively at a much lower cost
- Asynchronous callbacks — animation triggers do not block the main thread
- Batch processing — multiple elements entering the viewport simultaneously are handled in a single callback
- Automatic cleanup — once an element has animated in, the observer disconnects from it to free resources
The result is scroll animations that are visually identical to heavy JavaScript libraries but with zero performance penalty. Your Core Web Vitals — particularly Interaction to Next Paint (INP) — remain excellent.
Staggered Animation Sequencing
When multiple elements enter the viewport simultaneously (like a row of product cards), animating them all at once looks robotic and loses the reveal effect. The module supports automatic staggering — each subsequent element in a group starts its animation slightly later than the previous one, creating a cascading wave effect that looks natural and intentional.
You configure the stagger delay (e.g., 100ms between each element), and the module automatically calculates the appropriate delay for each element based on its position in the group.
Accessibility and Reduced Motion
The module respects the prefers-reduced-motion: reduce media query. Users who have enabled "Reduce motion" in their operating system settings will see elements appear instantly without animation. This is not just good practice — it is an accessibility requirement under WCAG 2.1 Level AAA and increasingly under legal compliance frameworks.
Technical Specifications
- PrestaShop compatibility: 1.7.0 through 9.x
- PHP compatibility: 7.2 through 8.4
- Multi-shop: Yes — independent animation rules per shop
- Dependencies: None (IntersectionObserver is supported in all modern browsers)
- Hooks used: actionFrontControllerSetMedia, displayHeader
- Database tables: ps_scroll_animations (stores animation rules)
- Total JS footprint: Under 3 KB minified and gzipped
- License: Proprietary — single-domain license, unlimited duration
Why is this module unique?
- IntersectionObserver-based instead of scroll-event-based — architecturally superior performance
- CSS selector targeting means zero template file editing required — configure everything from the back office
- Automatic stagger sequencing for groups of elements creates professional cascading reveal effects
- Under 3 KB total footprint — lighter than a single product thumbnail image
- Respects prefers-reduced-motion for full accessibility compliance
Use Cases
- Premium brand stores — scroll animations convey quality and attention to detail that customers associate with luxury
- Stores with rich homepages — feature sections, testimonials, and promotional blocks come alive as visitors scroll
- Category pages with large listings — staggered product card animations keep the browsing experience engaging
- Landing pages for marketing campaigns — animated reveals increase dwell time and scroll depth
- Stores competing on user experience — subtle animations differentiate your store from static, template-looking competitors
-
Referencemprscrollanimations
-
PrestaShop CompatibilityPS 1.6 – 9.x
-
Pricing ModelOne-time Purchase
-
Module TypeFront-office
-
GDPR RelevantNo
-
Business GoalBoost Conversions
-
External Account NeededNo
-
Module ComplexityLightweight Widget
-
Customer Journey StageEngage Shoppers
-
Works With PlatformNo External Platform
v1.1.0 — 2026-01-28
- ▸Added PrestaShop 9.x compatibility
- ▸New animation library: 25+ scroll-triggered effects (fade, slide, zoom, flip, rotate)
- ▸Added per-element animation configuration via CSS classes (no coding required)
- ▸Configurable trigger offset and animation duration per element
- ▸Fixed animations not triggering on dynamically loaded AJAX content
v1.0.2 — 2025-07-10
- ▸Fixed animation replay issue when scrolling back up (configurable: once or repeat)
- ▸Added stagger delay option for sequential element animations in lists/grids
- ▸Improved Intersection Observer polyfill for older browsers
v1.0.1 — 2025-01-25
- ▸Fixed animation conflict with lazy-loaded images causing layout shift
- ▸Added reduced-motion media query support for accessibility
- ▸Minor performance fix: disconnect observer for fully animated elements
v1.0.0 — 2024-08-20
- ▸Initial release
- ▸Scroll-triggered CSS animations for storefront elements
- ▸Configurable animation types, delays, and durations in back office
- ▸Automatic detection of animatable elements (images, text blocks, product cards)
- ▸Lightweight implementation using Intersection Observer API
- ▸Compatible with PrestaShop 1.7 and 8.x
What customers say about us
5.0
★
★
★
★
★
(1 review)
Great work and support
Great work and support
5.0
★
★
★
★
★
(3 reviews)
Niesamowite doświadczenie i znajomość Prestashop. Każdy minimalny błąd analizowany i poprawiany. Bardzo dobry kontakt podczas realizacji zlecenia
Jest to najlepszy informatyk / programista jakiego znam. Gość jest geniuszem do wszystkich spraw związanych z prowadzeniem strony internetowej oraz sklepu internetowego. Usługi warte każdych pieniędzy, polecam!
Very professional service. The store staff has a customer-focused approach. They effectively helped us select the most optimal solution for our store, then efficiently guided us through the technical aspects of the implementation process. They also provide ongoing support in managing and promoting our website. We highly recommend them!
No feature requests yet. Be the first to suggest an idea!
No known issues
There are currently no open or resolved issues registered for this module.
30 days return right
Easy return - no questions asked
Plug & Play Modules
Install, set up and take profit
Dedicated Support First
Priority Help & Satisfaction Over Sales
More From This Category
No reviews yet. Be the first to leave a review!
Write a Review