Waypoint Widget

Waypoints allow you to change the background of a page or another container when the user scrolls past a specific point. This feature lets you transition the existing background color, image, or video to a new one based on the user's scroll position.

To see waypoints in action, check out our demo here.

Adding Waypoints

Click the plus button at the top left corner.

Expand the Waypoints section and select your preferred waypoint type.

Types of Waypoints:

• Color Waypoint:

Applies a solid color to your background.

Adjust the color and the waypoint's location in the Waypoints Settings.

• Image Waypoint:

Functions like the Color Waypoint but uses an image instead of a solid color.

You can select an existing image from the Media Library; Unsplash, upload a new one, or paste an image URL.

• Video Waypoint:

Plays muted videos as your background in a loop.

• Scrollable Waypoint:

The video will play as the user scrolls. Uses short videos with a file size of 20 MB or less.

Setting Up Waypoints

To customize your waypoints, follow these steps:

1. Click on Waypoints Settings

2. Use the settings to adjust the color, image, or video and specify the location.

• Target: The target of the waypoint should be a container where you want the waypoint content to appear.

• Trigger: Controls when the waypoint will fade in relative to the top of the target. If you want the waypoint to be persistent and not animate, or if the waypoint is added to the first section, use 100% or more.

Changing Waypoint Types

If you want to switch the type of your waypoint, you can do so using the waypoint type dropdown menu as shown below:

With these settings, you can easily create dynamic backgrounds that enhance the user experience as they scroll through your page.