Sticky Project Showcase Section

Sticky Project Showcase Section

Sticky Project Showcase Section

Sticky Project Showcase Section

Website

Website

Website

Website

Sticky Project Showcase Section

Sticky Project Showcase Section

Sticky Project Showcase Section

Sticky Project Showcase Section

This is a sticky projects showcase section in Framer, recreated from the Darkroom website. Feel free to remix the project to see how you can achieve this behavior without any coding.

This is a sticky projects showcase section in Framer, recreated from the Darkroom website. Feel free to remix the project to see how you can achieve this behavior without any coding.

This is a sticky projects showcase section in Framer, recreated from the Darkroom website. Feel free to remix the project to see how you can achieve this behavior without any coding.

This is a sticky projects showcase section in Framer, recreated from the Darkroom website. Feel free to remix the project to see how you can achieve this behavior without any coding.

Sticky Project Showcase Section
Sticky Project Showcase Section
Sticky Project Showcase Section
Sticky Project Showcase Section

About The Resource

To create this section in Framer, I mainly used three things:

  1. Sticky positioning

  2. Scroll variant

  3. 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.

sitkcy 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.

component with variants in Framer

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 in Framer

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 in Framer
Step 01 outline

Step / 01

Remix the project.

Step 2 outline

Step / 02

See how it's built.

Step 3 outline

Step / 03

Try recreating it for practice, or copy and paste it to your project.

Free Framer Course

Learn how to create stunning websites with ease by learning the fundamentals of Framer.

Free
Framer Course

Learn how to create stunning websites with ease by learning the fundamentals of Framer.

Free Framer Course

Learn how to create stunning websites with ease by learning the fundamentals of Framer.