How to Create a Horizontal Scroll Animation in Framer

In this tutorial, you'll learn how to create a horizontal scroll animation using Framer.

Step 1: Create a Columns

1. Start by creating a new Framer project.

2. Add a Columns with the following properties:

   • Width: fit

   • Height: fit

3. Insert your image into this Columns.

Step 2: Create a Sticky Parent Container

1. To enable the horizontal scrolling effect, add another Columns, which will serve as the parent container.

2. Configure this parent container with the following properties:

   • Sticky Position

   • Width: 1fr (to fill the available horizontal space)

   • Height: 100vh (to match the viewport's height)

3. Ensure that the layout of this parent container is horizontal, and set its distribution to "start."

Step 3: Add a Final Parent Container

1. Continue by adding one more Columns. This will be the final parent container for your scroll animation.

2. Set the properties of this final parent container as follows:

   • Relative Position

   • Width: 1fr (to fill the horizontal space)

   • Height: 300vh (adjust this value as needed)

3. Change the overflow property to "visible." On the desktop container, ensure that the overflow is also set to "visible."

Step 4: Add Scroll Section Names

1. To organize your animation, give your final parent container a scroll section name. For example, you can name it "scroll-horizontal."

2. Within the image Columns, add a Scroll Transform Effect.

3. Configure the Trigger to activate when the section is in view and select "#scroll-horizontal" as the target section. Also, set the viewport end as the trigger point.

4. In the "From" section, adjust the opacity and scale to 1. To center the initial image, adjust the horizontal position (X) to your liking (e.g., 500).

5. Repeat the same adjustments for the "To" section, but this time, position the last image in the center by modifying the horizontal position (X) to your liking (e.g., -2500).

6. You can customize the transition settings as desired.

7. Voila! You've successfully created a horizontal scroll animation in Framer.

Experiment with different images, layers, and animations to achieve the effect you desire.