Skip to content
← All work

Needed Academy

An animated, scroll-driven landing page and application flow.

  • Shopify
  • Liquid
  • JavaScript
  • Tailwind CSS
  • CSS animations

Overview

Needed Academy is a free education program from Needed for partners and curious mothers. Its page had to turn wireframes into something that moved. I was the lead engineer, working with the client and product to take the designs from wireframes to a finished Shopify page, with video, scroll-driven storytelling, animation, and an application form. I did this at The Beyond Group.

What I built

  • Built each part of the page as its own configurable Shopify section (hero, scroll story, program overview, closing statement, application form, testimonials, and citations), so the team can edit copy and media in the theme editor.
  • Made the hero a full-screen looping video, with separate desktop and mobile videos and a parallax effect as you scroll past it.
  • Built the scroll-driven story section, where the headline and image swap as you scroll, with its own mobile behavior.
  • Created small reusable animation pieces: an animated underline, an animated border, and fade-in entrances that start when an element scrolls into view.
  • Built the application form with field validation, loading and success states, and analytics events for field changes and submissions.

What it looks like

Screen recording of the live site, captured in October 2026.

A full scroll through the page, from the hero to the footer.

Technical challenges

Wireframes show layout, not motion

The designs did not say how anything should move, so I worked with the client and product to decide how each section should enter, pin, and transition. Timing is set with delay and duration utility classes, which keeps it easy to tune.

Scroll-driven sections

The story section pins its content while scroll position decides which headline and image are active. It also has to account for the sticky site header and a different layout on mobile.

Animating once, cleanly

A single observer marks elements as in view and as already animated, so entrances play when you reach them and do not replay as you scroll back and forth.