---
title: Image Scroll Trigger
description: 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…
url: "https://shapekode.com/product/shapeblock/docs/image-scroll-trigger/"
updated: "2026-11-04"
category: Media Block
---

# Image Scroll Trigger

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 Zoom, Rotate or Move Images on Scroll in WordPress Gutenberg | ShapeBlock Pro](https://www.youtube.com/embed/xGTP6oF6t7k?feature=oembed)

## How to Add an Image Scroll Trigger Block

Follow these steps to add and configure the Image Scroll Trigger Block in the Gutenberg editor.

### Step 1: Add the Image Scroll Trigger Block

1. Open a page or post in the WordPress Gutenberg editor.
2. Click the **+** button to open the block inserter.
3. Search for **Image Scroll Trigger** under ShapeBlock.
4. Insert the Image Scroll Trigger Block into your page.
5. Select the block to access its settings in the right-hand sidebar.
6. Choose an image from the Media Library or upload a new one. Use **Replace** in the block toolbar to change it later.

![Image Scroll Trigger block in the block inserter](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/doc-image-scroll-trigger-1.webp)

### Step 2: Configure the Image Scroll Trigger Block

Select the Image Scroll Trigger Block and open its settings in the right-hand sidebar. The available tabs are:

- **Settings:** Set the alternative text, aspect ratio, and scroll effect.
- **Style:** Set the image width and corner radius.
- **Advanced:** Configure the block padding, margin, and background.

![Image Scroll Trigger block selected in the editor with its settings sidebar](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/doc-image-scroll-trigger-2.webp)

## Settings Tab

The Settings tab contains the **Image** and **Animation** panels.

### 1. Image

- **Alternative Text:** Describe the image for people who cannot see it. Leave it empty if the image is only decoration.
- **Aspect Ratio:** Crop the image to a fixed shape, such as 1:1, 4:3, or 16:9. **Original** keeps the image as it is.

### 2. Animation

- **Effect:** 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.
- **Strength (%):** Set how strong the effect is. A higher number zooms, moves, or turns the image further.

Scroll the editor to see the image follow the scroll.

**Note:** Each Animation setting starts on **Default**, which uses the value set for the whole site under **ShapeBlock > Animation**. The current site value is shown in the control. Change a setting here to use a different value for this block only.

![Image Scroll Trigger block, Settings tab in the sidebar](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/doc-image-scroll-trigger-3.webp)

## Style Tab

The Style tab contains the **Image** panel.

### 1. Image

- **Width:** Set the image width. Responsive settings are available.
- **Corner Radius:** Round the image corners. Set all corners together or each corner separately.

![Image Scroll Trigger block, Style tab in the sidebar](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/doc-image-scroll-trigger-4.webp)

## Advanced Tab

The Advanced tab provides additional spacing and background controls for the Image Scroll Trigger Block. These settings apply to the entire block.

### 1. Spacing

- **Padding:** Set the inner spacing around the entire Image Scroll Trigger Block. Configure the top, right, bottom, and left values separately.
- **Margin:** Set the outer spacing around the entire Image Scroll Trigger Block. Configure the top, right, bottom, and left values separately.

Both controls support responsive settings for desktop, tablet, and mobile devices.

### 2. Background

- **Background:** Customize the background of the entire Image Scroll Trigger Block using a background color or gradient.

**Note:** The background applies to the whole block area.

**Live demo:** see the Image Scroll Trigger Block in action on the [Image Scroll Trigger demo page](https://shapekode.com/product/shapeblock/image-scroll-trigger/).