Website
Sticky Project Showcase Section
Created by
About The Resource
To create this section in Framer, I mainly used three things:
Sticky positioning
Scroll variant
Scroll section
Let's see how and where each one is used.
Sticky Positioning
I used sticky positioning to make sure that the project showcase images on the right stick to the top of the viewport until we reach the end of the section. This way, the images stay visible the whole time as we scroll through multiple projects.
About The Resource
To create this section in Framer, I mainly used three things:
Sticky positioning
Scroll variant
Scroll section
Let's see how and where each one is used.
Sticky Positioning
I used sticky positioning to make sure that the project showcase images on the right stick to the top of the viewport until we reach the end of the section. This way, the images stay visible the whole time as we scroll through multiple projects.
About The Resource
To create this section in Framer, I mainly used three things:
Sticky positioning
Scroll variant
Scroll section
Let's see how and where each one is used.
Sticky Positioning
I used sticky positioning to make sure that the project showcase images on the right stick to the top of the viewport until we reach the end of the section. This way, the images stay visible the whole time as we scroll through multiple projects.
Sticky positioning in Framer.
Sticky positioning in Framer.
Sticky positioning in Framer.
It is important that sticky only works if all of its parent frames are set to overflow visible.
Scroll Variant
When you create a component in Framer, you can add multiple variants to it. For example, the showcase images with their description text below and a button are wrapped in a component that has seven different variants, each with a different image and description.
It is important that sticky only works if all of its parent frames are set to overflow visible.
Scroll Variant
When you create a component in Framer, you can add multiple variants to it. For example, the showcase images with their description text below and a button are wrapped in a component that has seven different variants, each with a different image and description.
It is important that sticky only works if all of its parent frames are set to overflow visible.
Scroll Variant
When you create a component in Framer, you can add multiple variants to it. For example, the showcase images with their description text below and a button are wrapped in a component that has seven different variants, each with a different image and description.
Component with variants.
Component with variants.
Component with variants.
What I do then is add a "scroll variant" effect to this component, changing these variants based on different triggers. In this case, I used "section in view" as a trigger.
Scroll Section
A scroll section can be added to any element in Framer. You just select it and add the section name on the right panel. Then, you can use these sections as triggers for different effects, like the scroll variant.
What I do then is add a "scroll variant" effect to this component, changing these variants based on different triggers. In this case, I used "section in view" as a trigger.
Scroll Section
A scroll section can be added to any element in Framer. You just select it and add the section name on the right panel. Then, you can use these sections as triggers for different effects, like the scroll variant.
What I do then is add a "scroll variant" effect to this component, changing these variants based on different triggers. In this case, I used "section in view" as a trigger.
Scroll Section
A scroll section can be added to any element in Framer. You just select it and add the section name on the right panel. Then, you can use these sections as triggers for different effects, like the scroll variant.
Scroll sections created for triggers.
Scroll sections created for triggers.
Scroll sections created for triggers.
So, I set the scroll variant effect to the section in view trigger with the center viewport option, which means that when the element with the scroll section reaches the middle of the viewport, the effect is triggered.
So, I set the scroll variant effect to the section in view trigger with the center viewport option, which means that when the element with the scroll section reaches the middle of the viewport, the effect is triggered.
So, I set the scroll variant effect to the section in view trigger with the center viewport option, which means that when the element with the scroll section reaches the middle of the viewport, the effect is triggered.
Scroll variants used in the scroll animation.
Scroll variants used in the scroll animation.
Scroll variants used in the scroll animation.
