About this plugin
RZN Studio Scroll Animations animates your pages as visitors scroll, with no setup. Headings, paragraphs, lists, images, videos, buttons, tables, forms, cards, project and service boxes, WooCommerce products and blog posts slide in.
It reads your layout to pick the direction:
* an element in a left column comes from the left, and one in a right column from the right;
* a short label above a heading drops in from the top;
* everything else rises from below.
Headings can reveal line by line, using whole words, so Arabic and other joined scripts stay intact.
Works with
- The block editor (every block gets a “Scroll Animations” panel), the classic editor, widgets, HTML blocks and shortcode output.
- Elementor: Advanced > Scroll Animations on every widget, container and section, plus a page switch.
- Divi, Beaver Builder, WPBakery, Bricks, Oxygen and any theme.
- WooCommerce: product grids, product pages, shop and category pages.
- Content added later: load more buttons, AJAX filters and infinite scroll.
Fast by design
- No animation library. A small script (about 7 KB gzipped) uses one IntersectionObserver and no scroll listeners.
- Only transform, opacity and clip-path change, so there is no layout shift.
- Loaded with defer. The CSS is a few lines printed inline, so it adds no extra request.
- Content is never hidden without JavaScript.
- Anything already on screen when the page opens is left alone, which protects Largest Contentful Paint (LCP).
- Visitors who ask for reduced motion see no animation.
- If anything goes wrong, everything shows at once.
Left alone on purpose: headers, menus, sliders, popups, the admin bar, cart, checkout and account pages.
Smooth scrolling (optional) uses Lenis. It is on for computers by default, and phones keep their native touch scrolling unless you turn it on.
Control
- Choose an effect for any single element: up, down, left, right, zoom, clip or parallax, or “none” to keep it still.
- Turn motion off per page: in the editor box, in Elementor > Page Settings, or in the Pages tab.
- There is an ON/OFF switch in the admin bar, and?rznssa-off in any address previews a page without motion.
- You can list CSS selectors to always skip, or to always animate.
Third-party library
engineering, MIT license.
com/darkroomengineering/lenis