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

[@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!

[@BrutalInsights]

more and more GSAP, kindly and please kind Sir and team at Prismic 😇 loving these vids

[@Paul-mf7zx]

What happened to Frontend Horse? I miss 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.

[@TrostCodes]

Amazing timing, then! Let me know how it goes, I'd love to see.

[@qkzoo18]

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

[@TrostCodes]

My pleasure! Thanks so much for the kind comment!

[@sergiik9174]

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 KZbin channel and eventually discovered this one we’re all looking at now. Thanks, man!

[@moonrider369]

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

[@kissu_io]

Nice camera setup and content. 👌

[@voiciray]

You're an AMAZING teacher.

[@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!

[@666Bockwurst666]

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.

[@memestagestartup]

Doing God's work.

[@drmindriot]

Amen

[@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!

[@benitocanfora7667]

This video is invaluable, thank you!!

[@nickstaresinic4031]

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.

[@yaser8354]

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

[@mozammel404]

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 ❤

[@sidakvats693]

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

[@roblesrt]

yeah same with eCommerce with Sveltkit + Prismic, TailwindCSS would be great!

[@akauppi2]

Hmm. So you don’t have to? Please take some pride in learning on your own, before AI takes that away.

[@Prady.here.]

@@akauppi2he wanna learn ?

[@blokche_dev]

Such a valuable content. Thanks for sharing!

[@Prismic]

Glad it was helpful!

[@matthieutricoire3079]

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.

[@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

[@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.

[@tofu_u]

I have a question though. Is there a reason to use clsx when you in SvelteKit can just type classes like this: class="opacity-90 shadow-2xl lg:col-span-2 lg:pt-0 {slice.variation === 'reverse'? 'lg:order-1 lg:translate-x-[15%]': 'lg:-order-1 lg:translate-x-[-15%]'}"

[@DomskiPlays]

Gonna watch all this later today

[@miccross8230]

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.

[@al1gned]

Why and when would a developer choose svelte over other frameworks like vue or react/next?

[@bot5am]

when a developer loves themselves

[@akauppi2]

Svelte took a different approach to the ones you mention, being more of a compiler than a frameork, in the beginning. This gave some benefits that other frameworks didn't have, at the time. I like it. The documentation has been absolutely brilliant. But Prismic seems to work for the other ones you mention, as well. Only this video uses SvelteKit.

[@Sneha-mav]

how to get local host running after u have closed the vs code how to view your website live again

[@jalapenosauce8875]

The starter page gives 500 internal error. What should I do?

[@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.

[@Prismic]

We'll chat about Svelte 5 soon on the channel, stay tuned :)

[@protimpal4858]

dang that was awesome

[@ayenmonasha.7593]

I am trying to build something like this and this tutorial has been really helpful but I am having a problem with I think my mappers.js folder, when I import mappers to the pages.server.js page, there is this error coming: Type '{ case_studies: ({ slice, context }: { slice: CasestudiesSlice; context: { client: Client; }; }) => Promise; }' has no properties in common with type 'SliceMappers'. If anyone could help me understand what I might have done wrong I will really appreciate it. Thanks

[@PwndByKuko]

@prismic, I can't even clone the repo? Is Prismic dead? Was anyone able to follow along?

[@Prismic]

Hey there! Prismic is definitely alive 😄 Tell us more about your issue?

[@PwndByKuko]

@@Prismic Hey, thats nice to hear, i really like the video so far! If i want to create a Repo, i run into a RequestError "Type: "timeout". And a error Screen "Prismic has run into an error". I tried all the available Svelte Repo Options but keep running into the timeout! Is there anything i can do? I logged in via Github.

[@Prismic]

Did you create your repository thorugh the terminal or from the Prismic Dashboard UI?

[@PwndByKuko]

@@Prismic Hey Prismic, i did it through the UI, but i guess via Terminal it works better, im Up and running now! Gonna follow the Tutorial now, thank you guys :)

[@emonymph6911]

Is this using svelte 5 or 4?

[@Prismic]

Good question! This uses svelte 4, as 5 isn’t at a stable release yet.

[@emonymph6911]

@@Prismic Thank you for sharing your knowledge with the community.

[@ImportCode]

Please your terminal extension

[@wernerdev]

good video but that vscode font is a crime

[@CryptoNewsTV]

I hate cursive with a passion

[@m.qoidulghurril3911]

Im new in this, hoping for ndersand json fetch ext from prismic x svelte :v

[@FranklyTerrible]

Can I be honest? I get it, it's a puff piece for Prismic, but what if I don't want to use all that junk? It's such a pain.

[@kilobitz8639]

They all look the same.

[@irfansaeedkhan7242]

make more in nextjs

[@kirso]

@TrostCodes Would you be willing to share what VSCode theme are you using? :) I'll keep spamming until I get it!

[@AjaySingh-jz8qx]

Holy moly this guy is the picasso of the digital world Huge respect for this guy🫡🫡

[@GAMEADDICTishaan]

i did Something Similar to what the tutorial showed in Case Studies Slice but i am Having the 404 Error , i tried to fix it with the same way you showed but still not working , i used a single page instead of a re-usable page in the Slice Machine , is there any way i can fix it The Error i am getting is : SvelteKitError: Not found: /feature_extraction/feature-extraction-page [vite:dev] at resolve (eval at instantiateModule (file:///D:/Svelte_code/New%20folder/voice-sense/node_modules/vite/dist/node/chunks/dep-Pluk1iaB.js:50501:28), :494:13) [vite:dev] at resolve (eval at instantiateModule (file:///D:/Svelte_code/New%20folder/voice-sense/node_modules/vite/dist/node/chunks/dep-Pluk1iaB.js:50501:28), :294:5) [vite:dev] at #options.hooks.handle (eval at instantiateModule (file:///D:/Svelte_code/New%20folder/voice-sense/node_modules/vite/dist/node/chunks/dep-Pluk1iaB.js:50501:28), :67:56) [vite:dev] at Module.respond (eval at instantiateModule (file:///D:/Svelte_code/New%20folder/voice-sense/node_modules/vite/dist/node/chunks/dep-Pluk1iaB.js:50501:28), :291:40) [vite:dev] at process.processTicksAndRejections (node:internal/process/task_queues:95:5) [vite:dev] at async file:///D:/Svelte_code/New%20folder/voice-sense/node_modules/@sveltejs/kit/src/exports/vite/dev/index.js:502:22 { [vite:dev] status: 404, [vite:dev] text: 'Not Found' [vite:dev] }

[@ImportCode]

In the mapper use casestudies.primary.casestudies then take casestudies as parameter instead of items. That's if your repeatable zone name is named casestudies