Dynamically show content using Scroll Variant.
View the demo → https://fusion.framer.website/
Get the full template → https://www.framer.com/templates/fusion/
Creating an Interactive Feature Section in Framer
In this tutorial, we'll delve into the steps to create a dynamic feature section in Framer, showcasing how text and images can interact seamlessly as users scroll through a webpage.
Setting up the Stack for the Feature Section
The feature section we're aiming for consists of a phone image alongside text. As you scroll, the phone image stays fixed (sticky), while the text changes, and simultaneously, the phone's content updates.
Steps to Set Up:
Initial Setup: Start by preparing your page with a feature section. This should include a phone image next to some text.
Creating a Stack: Use Framer's stack feature to manage the layout. Ensure the stack is set to auto height, with a maximum width of 1200 pixels.
Adding Content: Draw another stack within the first one for your text layers, and set the width appropriately (like 360 pixels). Label it for easy identification, such as 'features container'.
Organizing Text: Place your text layers into this stack, and adjust settings such as alignment and height to ensure they occupy the full viewport height and fill the width of the initial stack.
Adjusting for Content: Change the height setting of your features container to 'fit content', allowing it to adapt to the height of the content inside.
Creating the First Feature Section
Now, let's focus on the first feature section.
Key Points:
Stack Configuration: Make sure the stack is well-configured to house your content, including the phone and the text.
Naming for Clarity: It's beneficial to name your sections clearly, like 'feature one', to keep track of them easily.
Duplicating the Feature Section for Remaining Sections
To create a cohesive experience, duplicate the first feature section setup for the remaining sections.
Steps to Follow:
Replicating Setup: Duplicate the first feature section and replace the content for subsequent sections.
Consistency in Dimensions: Ensure each feature section has consistent settings, like height set to the viewport and width set to fill.
Making the Phone Sticky
The sticky phone effect is crucial for the desired interactivity.
How to Achieve This:
Setting Position to Sticky: Select your phone component and set its position to 'sticky'. This will fix it at the top as users scroll.
Preview and Adjust: Preview the page to ensure the phone stays fixed while scrolling through different sections.
Adding the Scroll Variant Effect to the Phone
The scroll variant effect changes the phone's content as different text sections come into view.
Implementation:
Adding Scroll Variant Effect: Select the phone component and apply the 'scroll variant' effect.
Configuring the Effect: Set parameters such as the point of view change, and the variant to display for each text section.
Adding More Sections to the Scroll Variant Effect
To enrich the experience, you can add more sections with their respective variants.
Final Touches:
Naming Sections: Ensure each feature section is appropriately named for the scroll variant effect to work correctly.
Scroll Variant Settings: Assign each text section to change the phone's content to the corresponding variant.
