Animation
Circular Website Intro Scroll Animation in Framer
This is a circular website intro scroll animation recreated in Framer from Joao Paulots’s work. Feel free to remix the project and explore how to achieve such advance scroll animation in Framer without writing any code.
Created by
About the resource
To create this advanced scroll animation, I started with the circle-with-arms technique — I stacked seven arms and rotated them evenly to form a circle. Each arm has a scroll transform applied, where the from state lines them up, and the to state brings them back into a circle. This transition is triggered when the "form circle" scroll section comes into view.
Next, I wrapped the circle frame and added a scroll transform to scale it down.
Then I nested that inside another frame and applied a scroll transform to rotate the entire circle from 0 to -120 degrees in a separate scroll section.
I wrapped all of this in a content frame, which also contains a text stack. The text has its own scroll transform — I adjusted the Y offset in the from state to animate it as it scrolls into view.
Finally, I placed everything inside a sticky frame, which is wrapped within the main scroll animation.
About the resource
To create this advanced scroll animation, I started with the circle-with-arms technique — I stacked seven arms and rotated them evenly to form a circle. Each arm has a scroll transform applied, where the from state lines them up, and the to state brings them back into a circle. This transition is triggered when the "form circle" scroll section comes into view.
Next, I wrapped the circle frame and added a scroll transform to scale it down.
Then I nested that inside another frame and applied a scroll transform to rotate the entire circle from 0 to -120 degrees in a separate scroll section.
I wrapped all of this in a content frame, which also contains a text stack. The text has its own scroll transform — I adjusted the Y offset in the from state to animate it as it scrolls into view.
Finally, I placed everything inside a sticky frame, which is wrapped within the main scroll animation.
About the resource
To create this advanced scroll animation, I started with the circle-with-arms technique — I stacked seven arms and rotated them evenly to form a circle. Each arm has a scroll transform applied, where the from state lines them up, and the to state brings them back into a circle. This transition is triggered when the "form circle" scroll section comes into view.
Next, I wrapped the circle frame and added a scroll transform to scale it down.
Then I nested that inside another frame and applied a scroll transform to rotate the entire circle from 0 to -120 degrees in a separate scroll section.
I wrapped all of this in a content frame, which also contains a text stack. The text has its own scroll transform — I adjusted the Y offset in the from state to animate it as it scrolls into view.
Finally, I placed everything inside a sticky frame, which is wrapped within the main scroll animation.
The scroll transform applied to the arms of the circle in Framer.
The scroll transform applied to the arms of the circle in Framer.
The scroll transform applied to the arms of the circle in Framer.
