Creating a changing gradient background on scroll

Part 1: Create a section with a gradient background

1. Start with a blank section

2. Set the section height to 250vh

Note: The height of the section determines how long the gradient scroll will last. The section height needs to be more than 100vh in order to create the scroll effect.

3. Select the Design tab in the Inspector panel

4. Open the Color Picker

5. Choose the linear gradient

6. Set the degrees to zero so the colors align horizontally

7. Select the colors

Note: In this example, the gradient is made up of 3 colors. Add more color stops by clicking where you want them on the slider. Click and drag the stops to adjust the fade. The colors used in this example are:

• Color 1: #D769CE

• Color 2: #FE7D56

• Color 3: #66B362

Part 2: Add elements to the section

1. Add a container to the section

2. Remove the container background

3. Set the container width to 100%

4. Adjust the margins to zero on all sides

5. Taking into account the height of the header, set the container’s height to a calculation of (100vh - 50px)

6. Set the minimum height of the container to None

7. Make sure the container is docked to the top of the section

8. Add the SVG basic shape to the container

9. From the floating action bar under settings, toggle off Keep original proportions

10. Set the width and height of the shape to 100%

11. Remove the margins

12. Set the shape to Scale proportionally (this will automatically set the height to auto)

13. Add a maximum height of 100%

14. Add the text element to the container

15. Align the text horizontally and vertically so it is docked to the center of the container

Part 3: Create the sticky scroll

1. Select the container

2. From the Inspector panel, set the Position type to Sticky

3. Keep the Top offset at zero

Part 4: Finalize the design

You can add a section below the gradient one with the same background color as the last color of your gradient to create a smooth transition between sections. The new section will push the previous one once the gradient scroll is finished.

Result: When you preview the site and scroll down, the text and shape stay in place while in the background the gradient moves through colors.