Build an Animated Website with SvelteKit, GSAP & Prismic - Full Course 2024

🚀 Build a dark, modern, animated website with SvelteKit, GSAP, Prismic, Tailwind, and TypeScript!

In this in depth course we make a trendy, dark and modern website in the same style as Linear, AuthKit, Raycast, Clerk, and many more!

You'll learn how to use SvelteKit, the ultra fast Svelte metaframework. Prismic, a CMS that gives you a Headless Page Builder. We'll use GSAP to add wonderful animations to our site, both on page load and on scroll. We'll also use Tailwind CSS to style the super-polished website.

We'll get bootstrapped with a minimal starter to set up SvelteKit and Prismic for us, and I'll walk you through everything you need to know.

At the end of this course you'll have built and deployed a great SaaS marketing website that you can put in your portfolio or customize for clients,

- - -

📍 Chapters:
00:00:00 - SvelteKit Full Course Intro
00:01:41 - Project Overview with SvelteKit & Prismic
00:09:45 - Notion Doc / Help and troubleshooting
00:11:26 - Getting Started with Prismic
00:14:25 - Getting started with VSCode
00:18:42 - Homepage
00:29:56 - Adding Tailwind CSS
00:34:59 - Installing local font
00:41:45 - Setting up footer
01:07:03 - Tailwind CSS VSCode extension
01:07:41 - Creating the Header
01:54:00 - Styling the bento box
02:20:40 - Showcase Section
03:03:17 - Case Studies Slice
04:00:47 - Integrations Slice
04:29:50 - Call to action Slice
04:37:00 - Assembling in the Page Builder
04:57:40 - Deploying on Vercel
05:10:45 - Animate the Hero with GSAP
05:54:26 - Animate the Integrations section
06:16:57 - Accessibility and Final Touch

---

#sveltekit #gsap #svelte #sveltekit #prismic

[TrostCodes]

I hope you have a blast building this site with me. I'm excited to see how your sites turn out, and how you customize them to make them your own creations.
I packed a ton of different lessons, tools, and resources into this one, so let me know how you liked it!

[capnchill]

Was looking for exactly something like this, lo and behold you posted this. Gonna test this out with tailwind. thanks a tonne in advanced.

[qkzoo]

Awesome, thank you for taking the time to teach us in this way. Love

[sergiik]

I'm still wondering how other people, who create content that seems less valuable compared to this one, get tons of views. Keep it up, Alex! Thanks for your time and passion in creating this series. I'm really glad I stumbled upon your personal YouTube channel and eventually discovered this one we’re all looking at now. Thanks, man!

[moonrider]

THE ONLY YOUTUBER to make these type of website instead of the usual navbar, blog, etc website. Continue with your work mate, PLEASEEE! >3.

Subscribed!!

[tofu_u]

Wow what an awesome tutorial. Incredible production quality, great hints thrown in here and there and the final result looks stellar so it's motivating to push towards. Thanks for spreading the good word of Svelte!

[Bockwurst]

Just watched the first 10minutes and am hyped to dive into this project! Thanks!

[BrutalInsights]

First time ever using SvelteKit but nonetheless had a great tutor with good explanations and a fantastic project to keep me engaged.

[janisgaudreaultjg]

I am hyped to follow this tutorial ! I spent a lot of time learning prismic with sveltkit and this will make me learn much more. thanks!

[nickstaresinic]

Wow. Very impressive, both the rich content & your smooth and confident presentation. Thanks for you initiative and effort in developing this tutorial and making it available.

[benitocanfora]

This video is invaluable, thank you!!

[yaser]

The best teacher! 👌 I learned a lot, thank you!

[blokche_dev]

Such a valuable content. Thanks for sharing!

[sidakvats]

Sir please make a ecommerce website with prismic with all the features like payment gateway, order tracking and admin panel and user profile plz.

[mozammel]

I have experiences with building uis. However, in terms of animations and transitions, I am completely new and dont have any leads. I wanna learn from the very basic of it. Can anyone help me with any types of resources if you have it? Thank you ❤

[matthieutricoire]

Hi there,
I just watched the introduction to the video. It looks great and will help me discover svelte!

But the live site isn't working properly.
On firefox developer edition there is a grain that is displayed on the entire background.
On Arc I no longer have this problem, but none of the animations work.

[JeremyBunting]

@TrostCodes, there’s so much documentation in the Prismic site about using GraphQuery, why did you use the Mapper instead? The Mapper is so much more intuitive and GraphQuery seems crazy verbose, curious to hear your reasoning.

[MatthewHigley]

One hour in and I am so excited to actually build along with @TrostCodes. I'm curious if you'll use this tutorial as a basis for a rewrite once Svelte 5 drops? I'm hoping this will be a good 1-to-1 comparison to learn the differences and advantages of versions 4 vs 5.

[miccross]

coding along .... At 49.10, my link field has a disabled drop down named "choose media type', not the enabled drop down named "choose link type' shown in tutorial video. This stops a page being chosen for link.

[bisaanimations]

I started this tutorial and would love to complete it but when I tried to run the code we copy after setting up the repository I never got asked to install slice machine or anything…..all I got was an error code saying it could not run the code