AI News Hub Logo

AI News Hub

πŸš€ Open Source: Svelte 5 + GSAP Creative Agency Template

DEV Community
Yusuf Cengiz

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 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 Svelte 5 (Runes) GSAP (ScrollTrigger, timelines) Tailwind CSS v4 Optional: Lenis for smooth scrolling ⚑ Smooth scrolling experience 🎯 Scroll-triggered animations 🧱 Sticky & layered sections πŸ’Ž Glassmorphism UI elements πŸ“± Fully responsive design πŸŒ™ Dark mode ready πŸš€ Pre-rendered & fast 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 Portfolio websites Creative agency landing pages Product showcases Experimental UI projects 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. 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!