Sticky Project Showcase Section

Sticky Project Showcase Section

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Website

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.

image of Nandi Muzsik

Created by

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.

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.

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.

sticky positioning in Framer

Sticky positioning in Framer.

sticky positioning in Framer

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

Component with variants.

component with variants in Framer

Component with variants.

component with variants in Framer

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

Scroll sections created for triggers.

scroll sections in Framer

Scroll sections created for triggers.

scroll sections in Framer

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

Scroll variants used in the scroll animation.

scroll variants in Framer

Scroll variants used in the scroll animation.

scroll variants in Framer

Scroll variants used in the scroll animation.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More resources

More resources

  • Framer landing page with 3D floating mobile screens showcasing finance and crypto app designs, featuring 'Start With Framer' headline and no-code website builder tagline

    Animated Mini Website Template for Framer

    Website

    Framer landing page with 3D floating mobile screens showcasing finance and crypto app designs, featuring 'Start With Framer' headline and no-code website builder tagline

    Animated Mini Website Template for Framer

    Website

    Framer landing page with 3D floating mobile screens showcasing finance and crypto app designs, featuring 'Start With Framer' headline and no-code website builder tagline

    Animated Mini Website Template for Framer

    Website

  • Draggable Freeform Canvas Website in Framer

    Draggable Freeform Canvas Website in Framer

    Website

    Draggable Freeform Canvas Website in Framer

    Draggable Freeform Canvas Website in Framer

    Website

    Draggable Freeform Canvas Website in Framer

    Draggable Freeform Canvas Website in Framer

    Website