The best way to grow as a developer is to study the best and reverse-engineer the mechanics. I took inspiration from the ultra-clean, line-drawn SVG style of the 2019 Lemonade Insurance Giveback page (lemonade.com/giveback-2019) and completely rebuilt the interaction on my side. Huge credit to their original team for creating an aesthetic that remains incredibly impactful.
To elevate the technical side, I combined GSAP DrawSVG and MotionPath plugins within a ScrollTrigger timeline. This allowed me to dynamically draw the vector lines as the user scrolls while simultaneously guiding accent elements along the path curves. The result is a smooth, high-performance micro-interaction built entirely from scratch. Let me know what you think of the final look in the comments.