Project

Line and Grade

line-grade.com

I just launched a new site at Journey Group powered by Astro and GSAP, and this build was one of the smoothest and most fun I’ve done in a while. Here’s a breakdown of the stack, the logic behind the animations, and some stuff I learned along the way.

Stack Overview

  • Astro, the framework (and a new favorite)
  • GSAP, scroll and motion animation workhorse
  • SCSS, for nested styling + organizational sanity
  • Netlify, zero-hassle deployment
  • Figma, design planning and wireframing
  • Codepen, prototyping animation logic

Why Astro?

This was my first time building with Astro, and damn — it delivered.

It’s designed for performance-first static sites, and you feel that instantly. The component-based architecture made it dead simple to reuse layout patterns across pages, and TypeScript support gave me safety without getting in the way.

I’ll definitely be reaching for Astro again for static landing pages or content-heavy sites.

Key Wins

  • Performance: Ships zero JS by default, so you start fast and stay fast.
  • Island Architecture: Hydrate only what’s needed, when it’s needed — perfect for motion-heavy but mostly static pages.
  • Markdown Support: If I want to integrate a blog or CMS later, it’s ready for it.

Animations with GSAP

I’ve used GSAP before, but this was my first time going deep with their premium plugins (which are now free, thanks to Webflow’s sponsorship 🙌). The animation system on this site is mostly powered by three big features:

ScrollSmoother

Gives the whole site that buttery smooth scroll behavior. Pairs beautifully with parallax elements and timeline triggers.

Timeline

Hero section animation sequence

Used primarily in the hero section to stagger content on page load — text, images, and icons fade and slide in sequence. It adds just enough motion to keep it engaging without overwhelming.

ScrollTrigger

I used this plugin a ton.

Logo Locking + Transitions: There’s a fake “fixed” logo that pins itself in the corner and changes color based on section background — required some finesse to handle the overlapping transitions and maintain contrast.

GSAP ScrollTrigger Pinning example

“What We Do” Section: This one’s pinned, with scroll-linked animations that,

  • Keep the parent container centered
  • Dynamically update the active slide
  • Smoothly scale the image per scroll position
  • All with complex, nested logic — AI definitely helped here, more on that below.
GSAP ScrollTrigger and DrawSVG example

“Process” Section: Line graphics animate in when they enter the viewport using the drawSVG plugin. Dashed lines are masked to reveal dynamically, which gives a “live drawing” vibe as you scroll.

Highlights

  • Perfect Lighthouse Score: This is the first site I’ve built that get’s a perfect Lighthouse score, so I was pretty pumped about that.
  • Animations: The GSAP animations really bring the site to life, especially the scroll-triggered effects.
  • Accessibility and SEO: No fancy build is worth it if the site’s not usable or discoverable. I built it with semantic HTML, keyboard-friendly navigation, and Open Graph/meta tags out of the box.

Lessons Learned

We’re at a point where you can build pretty complex stuff fast — especially with help from AI. I used AI agents to help work through some of the animation logic, particularly in the “What We Do” section. If I’m honest, I couldn’t explain every line of that logic off the top of my head — and that’s a bit of a red flag.

AI is a tool, not a crutch. It’s great for jumpstarting logic or prototyping complex ideas fast, but if you don’t understand what it’s doing, you’ll end up with a mess of unmaintainable spaghetti. Always take time to refactor, comment, and make it yours.