Animation
Circular Scroll Animation in Framer
This is a Framer recreation of the circular scroll animation from Vendredi-society's website. Remix the project to see how it's built using scroll transform in Framer.
About the resource
This animation is pretty simple— basically we scale and rotate the circle containers (outer and Inner) using scroll transform inside a sticky frame. The circles start with 0.5 opacity and 0.01 scale, then scale up to 6 with full opacity. The outer circle rotates 80° clockwise, while the inner circle rotates at 60° counterclockwise. Also, added a text animation which uses the text scramble appear component, combined with a scroll variant effect.
Overall this animation uses sticky frame that stays fixed while hidden trigger frames scroll away, triggering the scroll animations through scroll transforms. Adjusting trigger sections ensures precise syncing for a smooth effect.
About the resource
This animation is pretty simple— basically we scale and rotate the circle containers (outer and Inner) using scroll transform inside a sticky frame. The circles start with 0.5 opacity and 0.01 scale, then scale up to 6 with full opacity. The outer circle rotates 80° clockwise, while the inner circle rotates at 60° counterclockwise. Also, added a text animation which uses the text scramble appear component, combined with a scroll variant effect.
Overall this animation uses sticky frame that stays fixed while hidden trigger frames scroll away, triggering the scroll animations through scroll transforms. Adjusting trigger sections ensures precise syncing for a smooth effect.
About the resource
This animation is pretty simple— basically we scale and rotate the circle containers (outer and Inner) using scroll transform inside a sticky frame. The circles start with 0.5 opacity and 0.01 scale, then scale up to 6 with full opacity. The outer circle rotates 80° clockwise, while the inner circle rotates at 60° counterclockwise. Also, added a text animation which uses the text scramble appear component, combined with a scroll variant effect.
Overall this animation uses sticky frame that stays fixed while hidden trigger frames scroll away, triggering the scroll animations through scroll transforms. Adjusting trigger sections ensures precise syncing for a smooth effect.
The scroll transform effect in Framer.
The scroll transform effect in Framer.
The scroll transform effect in Framer.
