astro-epic-scroll-odyssey Svelte Themes

Astro Epic Scroll Odyssey

šŸŒŒ Immersive storytelling experience using Astro, Svelte, GSAP ScrollTrigger, and Lenis smooth scrolling.

#astro#astrojs#gsap#lenis#netlify#netlify-deployment#parallax#pinning#svelte#svelte5
Demo Download

šŸŒŒ Astro Epic Scroll Odyssey

An immersive, cinematic scroll-telling experience with deep GSAP animations and buttery-smooth Lenis scrolling.


Journey through a story woven into the very fabric of the scroll bar. Featuring dynamic pinning, parallax layers, and text reveals powered by GSAP ScrollTrigger, delivered with zero-compromise static performance via Astro.

āœØ Highlights

  • Cinematic Scroll (Lenis): Perfect, buttery smooth scroll interception for flawless frame pacing.
  • Storytelling via GSAP: Complex horizontal pinning and parallax effects orchestrated with ScrollTrigger.
  • Astro Islands: 100% static HTML delivery with Svelte components hydrating only when the story demands interactivity.

šŸ§­ Pages

  • / - Main storytelling page
  • /robots.txt - Crawler rules generated dynamically
  • /sitemap-index.xml - Auto-generated sitemap

šŸ› ļø Tech Stack

Layer Technology
Framework Astro 6
Islands Svelte
Animations GSAP & Lenis
Language TypeScript
Styling Tailwind CSS 4
SEO @astrojs/sitemap, canonical metadata, robots.txt
Hosting Static deployment ready (Netlify optimized)

šŸš€ Local Development

šŸ“¦ Install

npm install

ā–¶ļø Run dev server

npm run dev

šŸ—ļø Build

npm run build

šŸ“ Project Structure

astro-epic-scroll-odyssey/
ā”œā”€ā”€ public/
ā”‚   ā”œā”€ā”€ favicon.svg
ā”‚   ā””ā”€ā”€ og.svg
ā”œā”€ā”€ src/
ā”‚   ā”œā”€ā”€ components/
ā”‚   ā”‚   ā”œā”€ā”€ Hero.svelte
ā”‚   ā”‚   ā”œā”€ā”€ HorizontalScroll.svelte
ā”‚   ā”‚   ā””ā”€ā”€ TextReveal.svelte
ā”‚   ā”œā”€ā”€ layouts/
ā”‚   ā”‚   ā””ā”€ā”€ Layout.astro
ā”‚   ā”œā”€ā”€ pages/
ā”‚   ā”‚   ā”œā”€ā”€ index.astro
ā”‚   ā”‚   ā””ā”€ā”€ robots.txt.ts
ā”‚   ā””ā”€ā”€ styles/
ā”‚       ā””ā”€ā”€ global.css
ā”œā”€ā”€ .gitignore
ā”œā”€ā”€ astro.config.mjs
ā”œā”€ā”€ LICENSE
ā”œā”€ā”€ netlify.toml
ā”œā”€ā”€ package-lock.json
ā”œā”€ā”€ package.json
ā”œā”€ā”€ README.md
ā””ā”€ā”€ tsconfig.json

šŸŒ Deployment

  1. Push your code to GitHub
  2. Connect repository to Netlify
  3. Build settings are auto-configured via netlify.toml
  4. Deploy

šŸ“„ License

MIT License. See LICENSE.

Top categories

tailwinddaisyuiadmin templatepopupmdsvexportfolioblogformecommerceuicarouselauthdarkseoimagerouting
Loading Svelte Themes