Component
Website Hero Animation in Framer
About the resource
To create this hero animation, I set up three variants for the component and connected them using an “Appear” interaction with a delay of 1 to create smooth transitions.
In the default variant, the cards are wrapped in a frame and nested within the card stack. The card frame is positioned with absolute positioning, and its opacity is set to zero. Ensure that all pins are deactivated for this step.
In the second variant, the opacity is set to one, and the positioning is switched back to relative. I added a staggered effect that animates the cards from right to left. To achieve this, override the delay for each card frame using the transition property in the styles panel.
In the third variant, the card frames are transformed using rotation and/or scaling to create the final transition. Be sure to reset the delay for the transition property or remove the overrides. For the middle image, I added an extra frame inside the card frame containing the purple image. This trick allows for a smooth transition of the middle card from the grey image to the purple one by adjusting its opacity from zero to one in this variant.
I also included a text component labeled "Out and In," where, in the default variant, the card layers are positioned absolutely, but the stack’s height remains fixed. For this text, I added a delay transition so it enters in a staggered manner along with the rest of the animation.
These variants work together to produce a seamless and visually appealing animation.
About the resource
To create this hero animation, I set up three variants for the component and connected them using an “Appear” interaction with a delay of 1 to create smooth transitions.
In the default variant, the cards are wrapped in a frame and nested within the card stack. The card frame is positioned with absolute positioning, and its opacity is set to zero. Ensure that all pins are deactivated for this step.
In the second variant, the opacity is set to one, and the positioning is switched back to relative. I added a staggered effect that animates the cards from right to left. To achieve this, override the delay for each card frame using the transition property in the styles panel.
In the third variant, the card frames are transformed using rotation and/or scaling to create the final transition. Be sure to reset the delay for the transition property or remove the overrides. For the middle image, I added an extra frame inside the card frame containing the purple image. This trick allows for a smooth transition of the middle card from the grey image to the purple one by adjusting its opacity from zero to one in this variant.
I also included a text component labeled "Out and In," where, in the default variant, the card layers are positioned absolutely, but the stack’s height remains fixed. For this text, I added a delay transition so it enters in a staggered manner along with the rest of the animation.
These variants work together to produce a seamless and visually appealing animation.
About the resource
To create this hero animation, I set up three variants for the component and connected them using an “Appear” interaction with a delay of 1 to create smooth transitions.
In the default variant, the cards are wrapped in a frame and nested within the card stack. The card frame is positioned with absolute positioning, and its opacity is set to zero. Ensure that all pins are deactivated for this step.
In the second variant, the opacity is set to one, and the positioning is switched back to relative. I added a staggered effect that animates the cards from right to left. To achieve this, override the delay for each card frame using the transition property in the styles panel.
In the third variant, the card frames are transformed using rotation and/or scaling to create the final transition. Be sure to reset the delay for the transition property or remove the overrides. For the middle image, I added an extra frame inside the card frame containing the purple image. This trick allows for a smooth transition of the middle card from the grey image to the purple one by adjusting its opacity from zero to one in this variant.
I also included a text component labeled "Out and In," where, in the default variant, the card layers are positioned absolutely, but the stack’s height remains fixed. For this text, I added a delay transition so it enters in a staggered manner along with the rest of the animation.
These variants work together to produce a seamless and visually appealing animation.
The two variants of the hero component.
The two variants of the hero component.
The two variants of the hero component.
