Interactive Hero Section in Framer

Interactive Hero Section in Framer

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

Interaction

Interactive Hero Section in Framer

This is a Framer recreation of the amazing features page from the Fey website. This project showcases how easy it is to create interactions like this, for example, on a hero section in Framer, without any coding knowledge whatsoever.

image of Nandi Muzsik
profile image of Dennis Brotzky
profile image of Thiago Costa

Created by

Interactive Hero Section in Framer
Interactive Hero Section in Framer
Interactive Hero Section in Framer

About the resource

If you want to create something like this, first of all, you'll need all the image assets. In this case, I used the assets found on the original website, created by Dennis and Thiago.

Once I had all the assets, I wrapped them in frames to create various different components.

For example, I created a component for the "Platform" that is elevating above the screen, stacked on top of each other.

About the resource

If you want to create something like this, first of all, you'll need all the image assets. In this case, I used the assets found on the original website, created by Dennis and Thiago.

Once I had all the assets, I wrapped them in frames to create various different components.

For example, I created a component for the "Platform" that is elevating above the screen, stacked on top of each other.

About the resource

If you want to create something like this, first of all, you'll need all the image assets. In this case, I used the assets found on the original website, created by Dennis and Thiago.

Once I had all the assets, I wrapped them in frames to create various different components.

For example, I created a component for the "Platform" that is elevating above the screen, stacked on top of each other.

the "Platform" component in Framer

The "Platform" component with its two variants.

the "Platform" component in Framer

The "Platform" component with its two variants.

the "Platform" component in Framer

The "Platform" component with its two variants.

As you can see, this "Platform" component has an "Active" and "Inactive" variant, so I can easily switch between these when I create the hover interaction.

To create the final interaction, I wrap the whole scene in a component called "Screens" and create multiple variants for it. I have variants titled 1-4, each representing the hover state of a platform, where not only the "Platform" component's variant changes but also the position of these platforms.

I also have a variant called "Mobile" to account for smaller devices.

As you can see, this "Platform" component has an "Active" and "Inactive" variant, so I can easily switch between these when I create the hover interaction.

To create the final interaction, I wrap the whole scene in a component called "Screens" and create multiple variants for it. I have variants titled 1-4, each representing the hover state of a platform, where not only the "Platform" component's variant changes but also the position of these platforms.

I also have a variant called "Mobile" to account for smaller devices.

As you can see, this "Platform" component has an "Active" and "Inactive" variant, so I can easily switch between these when I create the hover interaction.

To create the final interaction, I wrap the whole scene in a component called "Screens" and create multiple variants for it. I have variants titled 1-4, each representing the hover state of a platform, where not only the "Platform" component's variant changes but also the position of these platforms.

I also have a variant called "Mobile" to account for smaller devices.

the "Screens" component and its variants

The "Screens" component and its variants.

the "Screens" component and its variants

The "Screens" component and its variants.

the "Screens" component and its variants

The "Screens" component and its variants.

Once this "Screens" component has all these variants, I can simply connect each of these variants with interactions from the "Platform" components. I use event variables to trigger these mouse enter interactions on hover of specific trigger frames found within the "Platform" component.

Once this "Screens" component has all these variants, I can simply connect each of these variants with interactions from the "Platform" components. I use event variables to trigger these mouse enter interactions on hover of specific trigger frames found within the "Platform" component.

Once this "Screens" component has all these variants, I can simply connect each of these variants with interactions from the "Platform" components. I use event variables to trigger these mouse enter interactions on hover of specific trigger frames found within the "Platform" component.

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

  • Dynamic Action Bar in Framer

    Dynamic Action Bar in Framer

    Interaction

    Dynamic Action Bar in Framer

    Dynamic Action Bar in Framer

    Interaction

    Dynamic Action Bar in Framer

    Dynamic Action Bar in Framer

    Interaction

  • Trash Interaction in Framer

    Trash Interaction in Framer

    Interaction

    Trash Interaction in Framer

    Trash Interaction in Framer

    Interaction

    Trash Interaction in Framer

    Trash Interaction in Framer

    Interaction