Scrolling for side-to-side movement

Here’s what we’ll cover in this tutorial:

1. Establishing a scrolling animation
2. Including a horizontal movement
3. Implementing a transparency effect
4. Enhancing with a second step

Establishing a scrolling animation

1. Within the Interactions panel, select While Page is Scrolling from the On Current Page menu
2. Under the On Scroll section, opt for Play Scroll Animation
3. Hit the addition symbol beside Scroll Animations
4. Assign it a title (for instance, Hero Scroll Animation)

Including a horizontal movement

1. Ensure your element is chosen
2. While still in the Interactions panel, tap the addition symbol on the timeline
3. Select Move
4. For the movement, adjust the x-axis to 0 pixels

Implementing a transparency effect

1. Use the addition symbol to introduce another action
2. Select Opacity
3. Ensure the opacity is configured to 100%

Proceed to apply the movement and transparency actions to each targeted element.

Enhancing with a second step

1. Confirm the selection of your element
2. In the interactions panel, modify the x-axis to shift the element to the left (e.g., to -900 pixels)
3. Click the addition symbol at the bottom end of the timeline for this element to append another Opacity action
4. Adjust the opacity to 0%

Repeat this process for each element, adjusting x-axis values accordingly (e.g., 900 pixels to shift right instead of left) 

Activate Live Preview to witness your effects in real-time.