1 / 3
Overview
A landing page for a fictional creative studio, built to learn how the smooth, scroll-driven sites of design agencies actually work. No framework and no build step - one HTML file, one stylesheet and one script, with the motion written by hand. It is the project where the animation habits behind this portfolio came from.
Stack
Page
- HTML
- CSS
- JavaScript
Motion
- GSAP
- ScrollTrigger
- Locomotive Scroll
Extras
- Swiper
- Netlify
What I built
- 01Wrote every animation by hand in GSAP - the intro sequence, the headline that sets a word at a time, and the sections that move as you scroll past them.
- 02Hooked Locomotive Scroll's smooth scrolling up to ScrollTrigger, so the page eases as it moves and the animations still fire at the right place.
- 03A cursor that follows the pointer with a lag and grows over the hero - the same idea that ended up on this site.
- 04Full-bleed video, custom fonts and a Swiper carousel, on a plain HTML page with no build step at all.