Hey everyone 👋
I recently built and open-sourced a Svelte 5 + GSAP template focused on creating modern, animated landing pages (Awwwards-style).
👉 GitHub: https://github.com/YusufCeng1z/svelte-gsap-template
✨ Why I built this
While working with Svelte, I noticed that integrating GSAP can get messy:
- You need to manually bind DOM elements
- Run animations inside
onMount - Handle cleanup yourself
Even though GSAP is powerful, the setup friction is real.
So I wanted to create a clean starter template that already includes:
- Smooth scroll experience
- Scroll-triggered animations
- Reusable animation patterns
- Modern UI structure
⚙️ Tech Stack
- Svelte 5 (Runes)
- GSAP (ScrollTrigger, timelines)
- Tailwind CSS v4
- Optional: Lenis for smooth scrolling
🎬 Features
- ⚡ Smooth scrolling experience
- 🎯 Scroll-triggered animations
- 🧱 Sticky & layered sections
- 💎 Glassmorphism UI elements
- 📱 Fully responsive design
- 🌙 Dark mode ready
- 🚀 Pre-rendered & fast
🧠 Key Idea
Instead of scattering GSAP logic everywhere, the template:
- Keeps animations structured and reusable
- Makes it easier to scale animation-heavy UIs
- Reduces boilerplate for every new project
📸 Use Cases
- Portfolio websites
- Creative agency landing pages
- Product showcases
- Experimental UI projects
🧩 Why GSAP with Svelte?
Svelte has built-in animations, but:
- They’re great for simple transitions
- GSAP shines for complex timelines & scroll effects
This template tries to combine the best of both worlds.
💬 Feedback
This is still evolving, so feedback is super welcome 🙌
If you find bugs, have ideas, or want improvements — feel free to open an issue or PR.
⭐ If you like it, consider starring the repo!
Thanks!
Top comments (0)