Scroll Circle

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.

Instructions

• 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.

How It Works

• 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.

Main Features

• 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.

Use Cases

• 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.