You have added your text, images, and sections to your WordPress page. Everything looks good, but you want to add a little movement as visitors scroll.
For example, you could make a product image move upward when visitors reach it. Or make a portfolio image grow slightly as they scroll through your work.
So, how do you add these effects?
With Gutenverse PRO, you can add scroll-triggered animations directly in the WordPress block editor. You can build your page and adjust the animations without writing code or switching editors. To explore the different effects, you can learn more about the available effects in our related post on Gutenverse animation effects.
In this guide, we will show you how to animate an image as visitors scroll. You will learn how to set up the animation, adjust its movement, and check how it looks on your page.
What Are Scroll-Triggered Animations?
Scroll-triggered animations are a type of animation that responds to a visitor’s scroll position. As visitors scroll through a page, an element can move, change size, or change its appearance.
For example, imagine a service section with a short description on the left and an image on the right. As visitors scroll through the section, the image moves gently upward while the text stays in place so they can read it easily.
On the other hand, hover effects work differently. They respond when visitors place their pointer over an element, while page-load animations start when visitors open the page.
Start by choosing one section where movement serves a clear purpose. You might want to draw attention to a product detail or make a featured project stand out.
Then view the page with and without the animation to see whether the effect works well with your content.
Prepare Your Page Before Adding Animation
Start with a page that already has its main content and layout in place. When you can see the heading, paragraph, image, and surrounding sections together, you can make better decisions about how much movement the design needs.
For this tutorial, prepare a section with:
Choose an image visitors can understand at a glance. A product photo, website preview, or example of your work gives the movement something useful to highlight.
Add content above and below the section, too. You’ll need enough room to scroll toward the image and continue past it when you test the effect.
Check the spacing before you begin. If the image already sits close to a heading or button, moving it may cause an overlap. Leave enough room for the image to travel while keeping the surrounding content clear.
We’ll start with vertical movement. Working with one direction makes it easier to see what each adjustment changes.
How to Add a Scroll-Triggered Move Animation
1. Select the Image Block
Open your page in the WordPress block editor. If you’re editing a site template, open Appearance → Editor.
Select the Gutenverse Image block you want to animate. In the settings sidebar, open Advanced Animation → Scroll Trigger.
Make sure you select the image itself. In a section with nested blocks, you might accidentally select the column or container around it.
2. Choose an Animation Anchor
The anchor gives the animation a reference point for the visitor’s scroll position.
Choose an element from the anchor dropdown, or copy a Gutenverse element’s ID and paste it into the Anchor field. Select the element you want to use as the reference for the effect.
Think about the section visitors will be looking at when the movement begins. Using a relevant element makes the timing easier to assess.
You can read our animation anchor setup guide explains both selection methods.
3. Set the Movement
You can choose Animation Type → Move, then use Move Y for vertical movement.
The From tab sets the starting position. The To tab sets the ending position. Use a small difference between the two for your first attempt.
Set when the animation starts and ends, then adjust Anchor Origin, Easing, and Smooth Delay to refine the movement. Choose whether to show the effect on desktop, tablet, or mobile. You can follow our Move Animation guide for step-by-step instructions.
For this example, aim for a gentle upward movement beside the paragraph. Keep the text still so visitors can read it comfortably.
4. Save and Check the Page
Save your changes and open the page in a separate tab.
Scroll toward the section at your usual reading pace. Watch where the image starts moving, how far it travels, and where it finishes. Then scroll through again a little faster.
A movement that looks good when you scroll slowly may feel abrupt when someone browses quickly. Checking both helps you see how the effect behaves during normal use.
Adjust the Animation to Fit Your Content
Once you can see the effect on the saved page, look at the image and the surrounding content together.
Does the movement bring attention to the image at a useful moment? Does the image stay clear of the paragraph and button? Can visitors understand the section without waiting for the animation to finish?
If the image crosses nearby content, reduce the movement or give it more space. If it finishes too late, review the timing. Change one setting at a time so you can see which adjustment helps.
There’s no single amount of movement that suits every layout. A large product image in a spacious section can accommodate more movement than a small image beside a long paragraph. Let the available space and the content guide your decision.
It also helps to read the page from the top after you finish adjusting the section. You may like an animation on its own, then find that it competes with movement elsewhere on the page.
For example, if a heading, image, and button all move as visitors reach the same section, people may struggle to decide where to look first. Try keeping the heading and button still while the image moves. You’ll give the section a clearer focus.
Tip: If you keep watching the animation instead of reading the content, try reducing the movement.
Try a Scale Animation on Another Image
After you’ve tested the Move effect, you can try changing an image’s size with Scale Animation.
Scale X controls the horizontal size, and Scale Y controls the vertical size. You can set the starting and ending states through the From and To tabs, then adjust the scroll settings and device controls. Follow our Scale Animation guide for the setup.
For a portfolio section, try starting a project preview slightly smaller and letting it grow toward its normal size as visitors scroll. Keep the horizontal and vertical changes consistent so the preview retains its proportions.
This approach can work well when the image deserves a closer look, such as a detailed website design or product photograph. Leave enough space around it so the size change doesn’t crowd a caption or nearby project.
Test the scale effect on its own before combining it with movement. That makes it easier to judge whether the size change already gives the image enough emphasis.
Check the Animation on Mobile
An animation can fit comfortably on a desktop and feel crowded on a phone.
On a wider screen, your image and paragraph may sit beside each other. On mobile, they may stack into one column, placing the image much closer to the heading, text, or next section.
After checking the desktop version, open the page on a phone if possible. Scroll through it as you normally would and pay attention to:
If the movement feels too large for the smaller layout, simplify it or disable it for that device. Check that the section still looks complete with a stationary image.
Also consider visitors who find motion uncomfortable. Keep the movement restrained, and make sure people can access essential information without following or waiting for an animated element.
What to Check If the Animation Doesn’t Appear
If the animation doesn’t appear, check the settings below one at a time. This makes it easier to find the cause and see whether each change helps.
Make Sure You Selected the Right Block
Select the image you want to animate and check its animation settings. When you work with nested blocks, it’s easy to select the column or container around the image. If that happens, the effect may move the whole group instead of the image itself.
Check the Animation Anchor
Review the element you chose as the anchor. If you copied an element ID into the Anchor field, make sure it matches the element you want to use. Check it again if you recently replaced the block or rebuilt the section.
Check the From and To Values
The From and To values need to differ for the image to move or change size. If they match, you won’t see a change. If the difference is too small, you may struggle to notice it.
Try a larger difference while testing. Once you can see the animation working, reduce it until the effect fits your layout.
Review the Device Settings
Check whether you enabled the animation for the device you’re using. If you enabled it only for desktop, it won’t appear when you view the page on your phone.
Save Your Changes and Test the Page Again
After adjusting the settings, save your changes and check the animation on the published page. If it still doesn’t work as expected, you can find more help in the Gutenverse documentation.
FAQ
Scroll-triggered animations are effects that respond to a visitor’s scroll position on a webpage. They allow elements like images to move, change size, or change appearance as visitors scroll through the content.
No. With Gutenverse PRO, you can add scroll-triggered animations directly in the WordPress block editor. You can adjust movement, scale, timing, and other settings without writing CSS or JavaScript.
Yes. Gutenverse PRO lets you apply scroll-triggered animations to supported image blocks. You can make images move vertically or horizontally, or change their size as visitors scroll through the page.
Yes. You can use scroll-triggered animations on desktop, tablet, and mobile devices. Gutenverse PRO also lets you control which devices display the effects, so you can adjust or disable animations based on your layout.
Your animation may not appear if the anchor is incorrect, the starting and ending values are the same, or the effect is disabled for your device. Check these settings, save your changes, and test the animation on your page again.
Final Thoughts
Start with one image in a section you want visitors to notice, such as a product introduction or a featured project. Add a small movement, save the page, and scroll through it at your usual reading pace. Check when the animation begins, where the image ends up, and whether it leaves enough room for the text and buttons nearby.
Take a moment to read the whole page, too. An effect may look good while you focus on a single section, but feel distracting when you browse several animated sections in a row. If the movement keeps pulling your eyes away from the content, reduce it. Check the mobile version as well, where the same image may sit much closer to a heading or paragraph.
Once you’re happy with your first animation, try another effect where it suits the content. A slight size change might work well for a portfolio preview, while a gentle upward movement might suit a product photo. You don’t need to animate every section; choose the places where movement helps visitors notice something worth seeing.
Ready to try it on your own page? Explore Gutenverse Animation Effects and create your first scroll animation with Gutenverse PRO.
