Scroll Circle Animation is a unique Framer component that draws a circle around your text as the user scrolls.Perfect for section titles, key messages, or callouts, it adds a smooth, attention-grabbing effect with full customization.
Paste the component into your project.
Set your text and heading style (H1–H6).
Adjust circle distance, thickness, and animation speed.
Customize colors, fonts, and background to match your brand.
Preview in real-time inside Framer.
Text / Heading Type: Choose your label and heading size.
Circle Distance: Adjust spacing between text and circle.
Circle Color & Thickness: Full styling controls.
Animation Speed & Delay: Fine-tune scroll effect.
Font & Text Color: Match your design system.
Background Color & Overflow: Control visibility.
Eye-catching scroll animation.
Fully customizable design (fonts, colors, thickness).
Works with any heading or label.
Responsive and smooth in all layouts.
Plug & play, no code needed.
Highlighting section titles on landing pages.
Drawing attention to services or features.
Adding storytelling elements in scroll experiences.
Creative headings in portfolios and agency sites.
Blog or editorial headers with emphasis.
Made with love by Le Lab Framer.
Kevin Hardmeier
