Table of Contents Navigation

A GSAP-based navigation component. Each line can be linked to a section within a page or a different page for navigation. On hover, the lines smoothly scale and the neighboring lines scale to a smaller degree. Text reveals on hover, and on click it navigates to the linked sections.

Features

Per-letter hover scaling with adjustable max scale and neighbor falloff
Auto-fit sizing — text scales to match your frame's width or width + height, just like a native Framer text layer
Customizable scale
Optional hover color, separate from the base text color
Full Typography control (Font type, size, weight)
Adjustable line gap, row gap
Configurable transition duration and easing curve
Multi-line support — each line breaks into its own row automatically
Multi link and text support — each line can be linked with a dedicated text reveal

Best for

Secondary Navigation
Portfolio and case study Table of content display
Playful hover animation
Any spot that needs a little personality on hover

Need help?

Questions or feedback, reach me on X https://x.com/vaishchityala

Chityala Vaishnavi

Related Creators