Fastr Workspace - How to create Parallax effect – Fastr Community

Overview

This article will help you create a parallax effect using the Y Threshold trigger and the Change Scroll Factor action. If you would like to learn more about other triggers, actions, and interactions, please refer to the following article:

Fastr Workspace - Interactions Overview
Fastr Workspace - Interactions: Triggers
Fastr Workspace - Interactions: Advanced Options

Example of the Parallax Effect - You can view a live example of the parallax effect here: Parallax Effect

How to Create a Parallax Effect:

In this example, we will demonstrate how to create a parallax effect on multiple elements, such as images, rectangles, or any other widgets.

Step 1: Set the Downward Scroll Interaction - For the first image (or element), set the Y Threshold trigger to 50% in the Downward direction. Add the Change Scroll Factor action and set it to 50%. This will cause the element to move at half the speed of the page scroll, creating a parallax effect when scrolling down.
Step 2: Add the Upward Scroll Interaction - Next, repeat the process for the same element but configure it for the Upward direction. Set the Y Threshold trigger to 50% in the Upward direction. Set the Change Scroll Factor action to 100%.
Apply the Same Settings to Other Elements - Repeat the same setup for the remaining images or widgets where you want to apply the parallax effect. You can also adjust the percentage values for the Y Threshold and Scroll Factor depending on how strong or subtle you want the parallax movement to be.