Triggers For Scrolling In & Out Of Viewport

Video

Article

Overview - Triggers for Scrolling In & Out of Viewport

In Convertri, you can add triggers for elements that scroll in and out of viewport. This is a great way to add call to actions when your visitor is scrolling through certain elements. In this example, we’ll use a page of a restaurant that offers delivery and takeout.

In the first part, we’ll show you how to add a trigger after the bottom of an element has scrolled into view.

In the second part, we’ll show you how to add a trigger when the bottom of an element has scrolled out of view.

Trigger for an element scrolling into viewport

First, let’s decide the action that we want. Whenever the image of the shrimp scrolls into view, we’ll want a layer with a form to pop up. This means that the layer will be the target, so, let’s create a layer!

In your Page Builder, select Layers in the menu toolbar.

Here, you can create a new layer from scratch or choose one of the many templates stored in Convertri. To keep it simple, we’ll choose a template.

Select Convertri Layers in the left-hand column.
Select Pop-Ups
Select Pop-Up 1 and click Add.

4. Give the layer a name like Pop 1. This will be your target.
5. Click Ok.
6. Edit your layer to make it your own.

Example:

Assigning a trigger to an element for when it scrolls into viewport

To exit out of the layer, in the layers panel, select Hide all. You’re now back to editing the page.

2. Since we want to set the trigger on the image of the shrimp, scroll down to the image and select it.
3. With the image selected, open the Element Properties panel, and select Actions and Events.
4. Click Add New Action.
5. Set the new event as follows:

Event Type > Scroll > When bottom of element scrolls into viewport

Action > Show > Fade in target

Target > Layer Pop-Up 1 - Include contained elements

6. Click done!

7. Save your work and preview the action!

Trigger for an element scrolling out of viewport

First, let’s decide the action that we want. Whenever the last image of the menu scrolls out of the viewport (the chocolate cake), we’ll want a layer with a form to pop up. In order to set a trigger, we’ll need to name a target. In this example, we’ll use the same target that we used in the previous steps.

Select the image of the chocolate cake.
With the image selected, open the Element Properties panel, and select Actions and Events.
Click Add New Action.
Set the new event as follows:

Event Type > Scroll > When bottom of element scrolls out of viewport

Action > Show > Fade in target

Target > Layer Pop-Up 1 - Include contained elements

5. Click done!

6. Save your work and preview the action!