{"id":386848,"date":"2026-10-20T06:09:51","date_gmt":"2026-10-20T06:09:51","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/site-scroll-motion\/"},"modified":"2026-10-20T06:09:35","modified_gmt":"2026-10-20T06:09:35","slug":"rzn-studio-scroll-animations","status":"publish","type":"plugin","link":"https:\/\/wordpress.org\/plugins\/rzn-studio-scroll-animations\/","author":23585373,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"2.2.0","stable_tag":"2.2.0","tested":"7.1.3","requires":"6.3","requires_php":"7.4","requires_plugins":null,"header_name":"RZN Studio Scroll Animations","header_author":"RZN STUDIO TEAM","header_description":"Smooth scrolling and light scroll-reveal animations for every page: headings, text, images, buttons, cards, products and posts, in any theme or page builder. Fast, accessible and RTL aware.","assets_banners_color":"753a43","last_updated":"2026-10-20 06:09:35","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"https:\/\/developer.rznstudio.com\/","header_author_uri":"https:\/\/www.linkedin.com\/in\/amannurweb\/","rating":0,"author_block_rating":0,"active_installs":0,"downloads":47,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"2.2.0":{"tag":"2.2.0","author":"rznstudio","date":"2026-10-20 06:09:35","revision":3755966}},"upgrade_notice":[],"ratings":[],"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3755976,"resolution":"128x128","location":"assets","locale":"","width":128,"height":128},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3755976,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3755976,"resolution":"1544x500","location":"assets","locale":"","width":1544,"height":500},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3755976,"resolution":"772x250","location":"assets","locale":"","width":772,"height":250}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["2.2.0"],"block_files":[],"assets_screenshots":[],"screenshots":[]},"plugin_section":[],"plugin_tags":[785,76538,3640,71952,8500],"plugin_category":[50],"plugin_contributors":[287623],"plugin_business_model":[],"class_list":["post-386848","plugin","type-plugin","status-publish","hentry","plugin_tags-animation","plugin_tags-elementor","plugin_tags-reveal","plugin_tags-scroll-animation","plugin_tags-smooth-scroll","plugin_category-media","plugin_contributors-rznstudio","plugin_committers-rznstudio"],"banners":{"banner":"https:\/\/ps.w.org\/rzn-studio-scroll-animations\/assets\/banner-772x250.png?rev=3755976","banner_2x":"https:\/\/ps.w.org\/rzn-studio-scroll-animations\/assets\/banner-1544x500.png?rev=3755976","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/rzn-studio-scroll-animations\/assets\/icon-128x128.png?rev=3755976","icon_2x":"https:\/\/ps.w.org\/rzn-studio-scroll-animations\/assets\/icon-256x256.png?rev=3755976","generated":false},"screenshots":[],"raw_content":"<!--section=description-->\n<p>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.<\/p>\n\n<p>It reads your layout to pick the direction:\n* an element in a left column comes from the left, and one in a right column from the right;\n* a short label above a heading drops in from the top;\n* everything else rises from below.<\/p>\n\n<p>Headings can reveal line by line, using whole words, so Arabic and other joined scripts stay intact.<\/p>\n\n<p><strong>Works with<\/strong><\/p>\n\n<ul>\n<li>The block editor (every block gets a \"Scroll Animations\" panel), the classic editor, widgets, HTML blocks and shortcode output.<\/li>\n<li>Elementor: Advanced &gt; Scroll Animations on every widget, container and section, plus a page switch.<\/li>\n<li>Divi, Beaver Builder, WPBakery, Bricks, Oxygen and any theme.<\/li>\n<li>WooCommerce: product grids, product pages, shop and category pages.<\/li>\n<li>Content added later: load more buttons, AJAX filters and infinite scroll.<\/li>\n<\/ul>\n\n<p><strong>Fast by design<\/strong><\/p>\n\n<ul>\n<li>No animation library. A small script (about 7 KB gzipped) uses one IntersectionObserver and no scroll listeners.<\/li>\n<li>Only transform, opacity and clip-path change, so there is no layout shift.<\/li>\n<li>Loaded with defer. The CSS is a few lines printed inline, so it adds no extra request.<\/li>\n<li>Content is never hidden without JavaScript.<\/li>\n<li>Anything already on screen when the page opens is left alone, which protects Largest Contentful Paint (LCP).<\/li>\n<li>Visitors who ask for reduced motion see no animation.<\/li>\n<li>If anything goes wrong, everything shows at once.<\/li>\n<\/ul>\n\n<p><strong>Left alone on purpose:<\/strong> headers, menus, sliders, popups, the admin bar, cart, checkout and account pages.<\/p>\n\n<p><strong>Smooth scrolling<\/strong> (optional) uses Lenis. It is on for computers by default, and phones keep their native touch scrolling unless you turn it on.<\/p>\n\n<p><strong>Control<\/strong><\/p>\n\n<ul>\n<li>Choose an effect for any single element: up, down, left, right, zoom, clip or parallax, or \"none\" to keep it still.<\/li>\n<li>Turn motion off per page: in the editor box, in Elementor &gt; Page Settings, or in the Pages tab.<\/li>\n<li>There is an ON\/OFF switch in the admin bar, and <code>?rznssa-off<\/code> in any address previews a page without motion.<\/li>\n<li>You can list CSS selectors to always skip, or to always animate.<\/li>\n<\/ul>\n\n<h3>Third-party library<\/h3>\n\n<p>Smooth scrolling uses Lenis 1.3.4 by darkroom.engineering, MIT license.\nSource: https:\/\/github.com\/darkroomengineering\/lenis<\/p>\n\n<!--section=installation-->\n<ol>\n<li>Upload the plugin in Plugins &gt; Add New &gt; Upload Plugin, or install it from the plugin directory.<\/li>\n<li>Activate it. Motion starts on the whole site right away.<\/li>\n<li>Optional: adjust it in Settings &gt; Scroll Animations.<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id=\"will%20it%20slow%20my%20site%20down%3F\"><h3>Will it slow my site down?<\/h3><\/dt>\n<dd><p>No. There is no animation library: one small deferred script, a few lines of inline CSS, one observer and no scroll listeners. Elements on the first screen are not hidden, so the first paint is not delayed.<\/p><\/dd>\n<dt id=\"how%20do%20i%20set%20the%20direction%20for%20one%20element%3F\"><h3>How do I set the direction for one element?<\/h3><\/dt>\n<dd><ul>\n<li>Block editor: select the block, then open Scroll Animations in the sidebar.<\/li>\n<li>Elementor: Advanced &gt; Scroll Animations.<\/li>\n<li>Anywhere else: add a CSS class such as <code>rznssa-fx-left<\/code>, <code>rznssa-fx-right<\/code>, <code>rznssa-fx-up<\/code>, <code>rznssa-fx-down<\/code>, <code>rznssa-fx-zoom<\/code>, <code>rznssa-fx-clip<\/code>, <code>rznssa-fx-parallax<\/code> or <code>rznssa-fx-none<\/code>. You can also use the attribute <code>data-rznssa-fx=\"left\"<\/code>.<\/li>\n<\/ul><\/dd>\n<dt id=\"can%20i%20use%20it%20in%20the%20classic%20editor%20or%20a%20theme%20template%3F\"><h3>Can I use it in the classic editor or a theme template?<\/h3><\/dt>\n<dd><p>Yes. Wrap any content in <code>[rznssa_motion effect=\"left\" delay=\"0.2\"] ... [\/rznssa_motion]<\/code>, or add one of the classes above.<\/p><\/dd>\n<dt id=\"something%20should%20not%20move.\"><h3>Something should not move.<\/h3><\/dt>\n<dd><p>Give it the class <code>rznssa-fx-none<\/code>, or add its CSS selector under Settings &gt; Scroll Animations &gt; Advanced &gt; Never animate these elements.<\/p><\/dd>\n<dt id=\"does%20it%20work%20with%20right-to-left%20languages%3F\"><h3>Does it work with right-to-left languages?<\/h3><\/dt>\n<dd><p>Yes. Directions follow what visitors see on screen, and headings are split by whole words only.<\/p><\/dd>\n<dt id=\"what%20about%20elementor%27s%20own%20entrance%20animations%3F\"><h3>What about Elementor's own entrance animations?<\/h3><\/dt>\n<dd><p>By default they are ignored on the live site, so an element is not animated twice. Your page data is not changed, and you can switch this off in the settings.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>2.2.0<\/h4>\n\n<ul>\n<li>Renamed to RZN Studio Scroll Animations (slug rzn-studio-scroll-animations).<\/li>\n<li>All functions, classes, options, hooks, handles and CSS classes now use the unique rznssa prefix.<\/li>\n<li>Admin styles and scripts are loaded with wp_enqueue functions.<\/li>\n<\/ul>\n\n<h4>2.1.0<\/h4>\n\n<ul>\n<li>Softer, smoother motion: longer expo easing for reveals and smooth scrolling.<\/li>\n<li>Theme and shortcode boxes are animated one by one: project, service, feature, portfolio, team, pricing and other boxes.<\/li>\n<li>Repeated boxes side by side in a grid are found by their layout, even without a known class name.<\/li>\n<li>Images (also inside links) and lazy-loaded images are animated.<\/li>\n<li>Masonry and filter grids that place items with their own position only fade, so their layout is never disturbed.<\/li>\n<li>Sites still on the 2.0.0 defaults move to the new, softer defaults automatically; changed settings are kept.<\/li>\n<\/ul>\n\n<h4>2.0.0<\/h4>\n\n<ul>\n<li>New motion engine without an animation library: much smaller and faster.<\/li>\n<li>Works on every page and with every editor and builder: block editor panel, classic editor shortcode, CSS classes and data attribute, Elementor, Divi, Beaver Builder, WPBakery, Bricks and Oxygen.<\/li>\n<li>Smarter directions from the layout (left, right, top, bottom).<\/li>\n<li>WooCommerce products, blog posts and content loaded later are animated.<\/li>\n<li>Cart, checkout and account pages stay still.<\/li>\n<li>\"Also animate these elements\" setting.<\/li>\n<li>Page switch in the block and classic editors.<\/li>\n<li>Fully translatable.<\/li>\n<\/ul>\n\n<h4>1.1.3<\/h4>\n\n<ul>\n<li>Earlier private release.<\/li>\n<\/ul>","raw_excerpt":"Smooth scrolling and light scroll-reveal animations for every page, in any theme or page builder. Fast, accessible, RTL aware.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/386848","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=386848"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/rznstudio"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=386848"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=386848"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=386848"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=386848"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=386848"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=386848"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}