Using Scrollsequence shortcode as a section background

Since using a Scrollsequence shortcode as a section background isn’t built-in, the steps in this guide provide a practical workaround. Following them lets you create scroll-driven animations for your sections, adding visual interest as users move through the page.

Here's a step-by-step guide:

Add a section

Click the + Add Block button
Search for Group and add it
Set Align → Full Width (optional, depending on your theme)
Set Minimum Height > 250vh (controls scroll space for the animation)
Open Advanced > Additional CSS Class and add: scroll-bg-section

Add heading/text

Inside the Group block, add a Custom HTML block first (or a HTML wrapper) for your text:

<div class="scroll-bg-content">

This wrapper makes it easier to center the text
Place it before the Scrollsequence shortcode block

Optionally, add buttons or more text inside this wrapper if needed.

Add the Scrollsequence shortcode

Add a Custom HTML block after the text block
Wrap the Scrollsequence shortcode in a div:

<div class="scrollsequence-bg">

Replace 123 with your actual Scrollsequence ID

Add the CSS

Go to Appearance > Customize > Additional CSS and paste:

/* Section settings */
.scroll-bg-section {
position: relative;
overflow: hidden;
min-height: 150vh; /* controls scroll space for animation */
}

/* Scrollsequence background */
.scrollsequence-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}

/* Center text vertically & horizontally */
.scroll-bg-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
text-align: center;
color: white; /* adjust to your background */
}

/* Optional: override any Scrollsequence wrapper z-index */
.scroll-bg-section .scrollsequence-wrap,
.scroll-bg-section canvas {
z-index: 1 !important;
}

Optional: Styling for heading/text

.scroll-bg-content h1 {
font-size: 3rem;
margin-bottom: 0.5rem;
}

.scroll-bg-content p {
font-size: 1.5rem;
}

.scroll-bg-content {
text-shadow: 0 2px 4px rgba(0,0,0,0.5); /* improves readability */
}

Here's a quick demo: https://share.zight.com/E0uQwpG4