{"id":4124,"date":"2026-10-28T04:04:12","date_gmt":"2026-10-28T04:04:12","guid":{"rendered":"https:\/\/shapekode.com\/product\/shapeblock\/docs\/image-scroll-trigger\/"},"modified":"2026-11-04T05:17:57","modified_gmt":"2026-11-04T05:17:57","password":"","slug":"image-scroll-trigger","status":"publish","type":"docs","link":"https:\/\/shapekode.com\/product\/shapeblock\/docs\/image-scroll-trigger\/","title":{"rendered":"Image Scroll Trigger"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">The Image Scroll Trigger Block moves an image as the page scrolls. The image can zoom, rotate, move up or down, fade in, come into focus, change from grey to color, or grow wider.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Use it to add movement to large photos in hero, about, and portfolio sections.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"How to Zoom, Rotate or Move Images on Scroll in WordPress Gutenberg | ShapeBlock Pro\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/xGTP6oF6t7k?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">How to Add an Image Scroll Trigger Block<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Follow these steps to add and configure the Image Scroll Trigger Block in the Gutenberg editor.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Add the Image Scroll Trigger Block<\/h3>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li>Open a page or post in the WordPress Gutenberg editor.<\/li>\n\n\n\n<li>Click the <strong>+<\/strong> button to open the block inserter.<\/li>\n\n\n\n<li>Search for <strong>Image Scroll Trigger<\/strong> under ShapeBlock.<\/li>\n\n\n\n<li>Insert the Image Scroll Trigger Block into your page.<\/li>\n\n\n\n<li>Select the block to access its settings in the right-hand sidebar.<\/li>\n\n\n\n<li>Choose an image from the Media Library or upload a new one. Use <strong>Replace<\/strong> in the block toolbar to change it later.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"350\" height=\"267\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-image-scroll-trigger-1.webp\" alt=\"Image Scroll Trigger block in the block inserter\" class=\"wp-image-4120\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-image-scroll-trigger-1.webp 350w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-image-scroll-trigger-1-300x229.webp 300w\" sizes=\"auto, (max-width: 350px) 100vw, 350px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Configure the Image Scroll Trigger Block<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Select the Image Scroll Trigger Block and open its settings in the right-hand sidebar. The available tabs are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Settings:<\/strong> Set the alternative text, aspect ratio, and scroll effect.<\/li>\n\n\n\n<li><strong>Style:<\/strong> Set the image width and corner radius.<\/li>\n\n\n\n<li><strong>Advanced:<\/strong> Configure the block padding, margin, and background.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1440\" height=\"973\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-image-scroll-trigger-2.webp\" alt=\"Image Scroll Trigger block selected in the editor with its settings sidebar\" class=\"wp-image-4175\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-image-scroll-trigger-2.webp 1440w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-image-scroll-trigger-2-600x405.webp 600w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-image-scroll-trigger-2-300x203.webp 300w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-image-scroll-trigger-2-1024x692.webp 1024w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-image-scroll-trigger-2-768x519.webp 768w\" sizes=\"auto, (max-width: 1440px) 100vw, 1440px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Settings Tab<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Settings tab contains the <strong>Image<\/strong> and <strong>Animation<\/strong> panels.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Image<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Alternative Text:<\/strong> Describe the image for people who cannot see it. Leave it empty if the image is only decoration.<\/li>\n\n\n\n<li><strong>Aspect Ratio:<\/strong> Crop the image to a fixed shape, such as 1:1, 4:3, or 16:9. <strong>Original<\/strong> keeps the image as it is.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">2. Animation<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Effect:<\/strong> Choose what happens to the image as the page scrolls: Zoom In, Zoom Out, Rotate, Move Up, Move Down, Fade In, Blur to Sharp, Grey to Colour, or Grow Wider.<\/li>\n\n\n\n<li><strong>Strength (%):<\/strong> Set how strong the effect is. A higher number zooms, moves, or turns the image further.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Scroll the editor to see the image follow the scroll.<\/p>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#f3edec;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px\"><strong>Note:<\/strong> Each Animation setting starts on <strong>Default<\/strong>, which uses the value set for the whole site under <strong>ShapeBlock &gt; Animation<\/strong>. The current site value is shown in the control. Change a setting here to use a different value for this block only.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"842\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-image-scroll-trigger-3.webp\" alt=\"Image Scroll Trigger block, Settings tab in the sidebar\" class=\"wp-image-4122\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-image-scroll-trigger-3.webp 280w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-image-scroll-trigger-3-100x300.webp 100w\" sizes=\"auto, (max-width: 280px) 100vw, 280px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Style Tab<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Style tab contains the <strong>Image<\/strong> panel.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Image<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Width:<\/strong> Set the image width. Responsive settings are available.<\/li>\n\n\n\n<li><strong>Corner Radius:<\/strong> Round the image corners. Set all corners together or each corner separately.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"424\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-image-scroll-trigger-4.webp\" alt=\"Image Scroll Trigger block, Style tab in the sidebar\" class=\"wp-image-4123\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-image-scroll-trigger-4.webp 280w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-image-scroll-trigger-4-198x300.webp 198w\" sizes=\"auto, (max-width: 280px) 100vw, 280px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Advanced Tab<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Advanced tab provides additional spacing and background controls for the Image Scroll Trigger Block. These settings apply to the entire block.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Spacing<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Padding:<\/strong> Set the inner spacing around the entire Image Scroll Trigger Block. Configure the top, right, bottom, and left values separately.<\/li>\n\n\n\n<li><strong>Margin:<\/strong> Set the outer spacing around the entire Image Scroll Trigger Block. Configure the top, right, bottom, and left values separately.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Both controls support responsive settings for desktop, tablet, and mobile devices.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Background<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Background:<\/strong> Customize the background of the entire Image Scroll Trigger Block using a background color or gradient.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#f3edec;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px\"><strong>Note:<\/strong> The background applies to the whole block area.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Live demo:<\/strong> see the Image Scroll Trigger Block in action on the <a href=\"https:\/\/shapekode.com\/product\/shapeblock\/image-scroll-trigger\/\">Image Scroll Trigger demo page<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Image Scroll Trigger Block moves an image as the page scrolls. The image can zoom, rotate, move up or down, fade in, come into focus, change from grey to color, or grow wider. Use it to add movement to large photos in hero, about, and portfolio sections. How to Add an Image Scroll Trigger [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[17,30],"doc_tag":[],"class_list":["post-4124","docs","type-docs","status-publish","hentry","doc_category-media-block","doc_category-pro-blocks"],"year_month":"2026-11","word_count":511,"total_views":"13","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Sojib","author_nicename":"shapekode-admin","author_url":"https:\/\/shapekode.com\/product\/shapeblock\/author\/shapekode-admin\/"},"doc_category_info":[{"term_name":"Media Block","term_url":"https:\/\/shapekode.com\/product\/shapeblock\/docs-category\/media-block\/"},{"term_name":"Pro Blocks","term_url":"https:\/\/shapekode.com\/product\/shapeblock\/docs-category\/pro-blocks\/"}],"doc_tag_info":[],"_links":{"self":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/4124","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/comments?post=4124"}],"version-history":[{"count":2,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/4124\/revisions"}],"predecessor-version":[{"id":5518,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/4124\/revisions\/5518"}],"wp:attachment":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/media?parent=4124"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/doc_category?post=4124"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/doc_tag?post=4124"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}