Interaction
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 with its two variants.
The "Platform" component with its two variants.
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.
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.
