Animation
Website Hero Intro Animation in Framer
About the resource
To create this hero intro animation in Framer, I went through a few steps. I made four variants: Out, In, Scale Down, and Expand. For the Out variant, which is basically the default state, I wrapped seven image frames in a container, set its position to -1200, scaled it up, and rotated it for that off-screen feel. Oh, and two of the images have pins that are scaled down to 0, so they’re hidden initially.
Then for the In variant, I just repositioned the container and reduced the rotation from -40 to -12 to bring it into view. Next was the Scale Down variant, where I scaled the container down to 1 to bring everything into focus.
And finally, for the Expand variant, I spread the images by adjusting their absolute positions and scaled up the pins. I also added transition overrides to the pins to make them appear with a slight delay.
About the resource
To create this hero intro animation in Framer, I went through a few steps. I made four variants: Out, In, Scale Down, and Expand. For the Out variant, which is basically the default state, I wrapped seven image frames in a container, set its position to -1200, scaled it up, and rotated it for that off-screen feel. Oh, and two of the images have pins that are scaled down to 0, so they’re hidden initially.
Then for the In variant, I just repositioned the container and reduced the rotation from -40 to -12 to bring it into view. Next was the Scale Down variant, where I scaled the container down to 1 to bring everything into focus.
And finally, for the Expand variant, I spread the images by adjusting their absolute positions and scaled up the pins. I also added transition overrides to the pins to make them appear with a slight delay.
About the resource
To create this hero intro animation in Framer, I went through a few steps. I made four variants: Out, In, Scale Down, and Expand. For the Out variant, which is basically the default state, I wrapped seven image frames in a container, set its position to -1200, scaled it up, and rotated it for that off-screen feel. Oh, and two of the images have pins that are scaled down to 0, so they’re hidden initially.
Then for the In variant, I just repositioned the container and reduced the rotation from -40 to -12 to bring it into view. Next was the Scale Down variant, where I scaled the container down to 1 to bring everything into focus.
And finally, for the Expand variant, I spread the images by adjusting their absolute positions and scaled up the pins. I also added transition overrides to the pins to make them appear with a slight delay.
The four variants.
The four variants.
The four variants.
