How To Add Animate on Scroll Effects To Your Page

Want to make your WordPress site feel more modern and engaging? Adding animations that trigger as you scroll down the page is a simple way to bring your content to life. Whether it’s images fading in or text sliding up, these subtle effects can make a big impact.

In this guide, we’ll show you how to easily add scroll animations to your WordPress site using Kadence blocks.

NOTE: This feature requires the Kadence Express Plan or higher. Please see our Pricing page to view your purchase options. This feature can be unlocked either through the Kadence Creative Kit or the Kadence Blocks Pro plugins.

What is Animate on Scroll?

Animate on scroll is a feature that adds motion to your page, making it feel more interactive and interesting. Instead of everything appearing all at once, content is revealed gradually, guiding the visitor’s attention and making the experience more engaging. Animations can include effects like:

• Fade
• Flip
• Slide
• Zoom
• Cover

What Blocks Can Be Animated?

Kadence blocks that can be animated include:

Pro Tip: You can animate any content by including it inside an animated Section block.

How To Animate A Block

Step 1: Insert one of the blocks listed above.

Step 2: Click the Advanced settings tab and open the Animate on Scroll section

Step 3: Select an Animation and adjust your settings

Animation Settings

Animation: Select an animation from the dropdown. Selecting an animation will reveal the additional settings.

Animation Duration: Choose how long the animation will last, start to finish. Use the slider to select 50 – 3000ms (0.05 – 3 seconds). Default/empty is 400ms (0.4 seconds).

Animation Ease: Select one of several easing functions or leave blank for no easing.

Start Delay: Select the time delay for the animation to start as the element scrolls into view. Select 50 – 3000ms (0.05 – 3 seconds) delay. Default/empty is 0 seconds.

Only Show Once Per Page Load: Default/False will show every time the user scrolls down. True will only show once per page load.

Pixel offset for when animation triggers: Slide to adjust from -300 – 300 pixels. Default/empty is 0.

To preview your animation in the editor, click the play ▶ button.

Default Settings

You can set default settings by going to Kadence Blocks Control > Block Visibility > Animate on Scroll

From here, you can configure the Default Animation Settings:

• Animation Duration
• Animation Ease
• Start Delay
• Only show once per page load
• Pixel Offset for When Animation Triggers

After making changes, click Save/Close to apply your default settings.

Note: These defaults will only apply to newly added blocks. Existing blocks will keep their current animation settings.

Animate on Scroll Tips

When using scroll animations, less is more. Animations should enhance the user experience, not distract from it. A good rule of thumb: if an animation helps draw attention or guide the visitor’s eyes, it’s likely worth including. If it’s just for decoration, consider leaving it static.

Here are a few tips for deciding how many and which elements to animate on a WordPress page:

Focus on Key Content

Animate the most important elements you want visitors to notice, such as:

• Headings or section titles
• Feature images or product highlights
• Call-to-action buttons (e.g., “Contact Us” or “Buy Now”)
• Testimonials or statistics

Avoid Overuse

Too many animations can feel overwhelming or slow down your site. Avoid animating:

• Every paragraph of text
• Small icons or decorative elements
• Navigation items (unless it’s intentional and subtle)
• Nesting animations (i.e., animating a block inside another animated block)

Animate on scroll can impact performance, especially on slower computers or mobile devices. Some performance tips include:

• Animate fewer elements (i.e., less is more)
• Use lightweight effects (i.e,. use fade or slide versus zoom or flip)
• Stagger animations (i.e., delay animations to avoid multiple simultaneous animations)
• Limit animation duration (i.e,. 600ms or less)

Keep It Consistent

Stick to one or two animation styles across the page to maintain a clean, professional look. For example, use a fade-up for content sections and a slide-in for images.

Test Responsiveness

Kadence Animate on Scroll settings apply to all screen sizes. Be sure to test your animations on tablets and mobile devices. What looks great on a desktop might feel too busy or confusing on smaller screens.