Hero Animation Tutorial | Svelte, Figma, Tailwind, Motion One

Excited to share this tutorial with you where I walk you through every step from start to finish of animating this landing page designed in Figma, using TailwindCSS, SvelteKit, and the MotionOne animation library!
Learn how to Code like a Designer: codingfordesig...
Chapters:
00:35 - Setting up SvelteKit and Tailwind
04:01 - Understanding the design
04:48 - Adding the assets
05:40 - Using the assets
07:04 - Extending the Tailwind theme with custom styles
10:42 - Writing the hero HTML and CSS
18:06 - Animating the hero
28:17 - Building the loader
Download the files for FREE on my Patreon: / sekeidesign
Original illustration by Studio MUTI: studiomuti.co.za/

[@a_tabaza]

This was beyond amazing, I have very little web dev experience yet this was highly engaging and crystal clear, kudos, truly!

[@JimmyCeeTV]

Excellent tutorial. More of svelte, tailwind and motion with strong design please. Really good stuff 🙏👏

[@greendsnow]

Keep burying it under loaders 😂 I love the colors, I love the timeline, I love Svelte and most importantly I love your attention to details. Start to finish, it was pleasing to watch. I'm subscribed

[@sekeidesign]

That really means so much, thank you! I’m glad you enjoyed it all the way through

[@slashritesh]

great explanation , want more creative tutorial on morden trendy animation !!

[@tgkhalil]

I didn't hear your cats (03:20)🤣 The structure of this tutorial, the well-rounded explanations, the level of detail, while switching between screens to show, in such short time through-out the whole vid! 🤯👏 And somebody like me with no background can really understand what, how and why you do, comfortably following along with no pause. Seriously, that's epic! Phenomenal tutorial! 🔥💯 Looking forward to more, gonna head over to your Patreon now. Thx!

[@666Bockwurst666]

love the svelte content :)

[@sekeidesign]

I'm glad! I love working with it

[@greendsnow]

Ah the content was so satisfying, I have to make a follow up video suggestion. Can you please animate the images according to the position of the mouse position as if the user is actually in THE jungle. You know when the mouse goes to the right side of the picture blurry left images moves to the left, blurry right image scales up and main image kind of moves right and perspective changes. And vice versa on the left side

[@Antonio-fo4fl]

An easy way to add tailwind is using the svelte-add package. It allows you to easily add various things to a svelte project like tailwind, firebase and some others

[@sekeidesign]

Oooh thank you! I’ll have to look into it

[@budivoogt491]

Same! Wasn't aware this existed.@@sekeidesign

[@atakann]

I can hear the beats says Welcome to the Jungle!

[@SuperRAilya]

22:25 motion one 24:14 timeline

[@catalincatalin4101]

Wonderful content. Would love to see your process of editing the assets in Photoshop (i assume you had some work on those left/right assets)

[@sekeidesign]

I just imported them into Pixelmator Pro and used the background removal tools! It’s really not an interesting process hahah

[@catalincatalin4101]

@@sekeidesign oh,ok.thanks. how about something constantly moving, like let's say the branches of a three, how would you animate something like that? Would you need to use three.js or something like that?

[@sekeidesign]

@@catalincatalin4101 it depends on what effect you’re going for, you could just use Motion with a looping timeline, you could use something like Rive, or yeah a WebGL shader could do it too

[@catalincatalin4101]

@@sekeidesign thanks for your answers. Are you planning to have a discord server?

[@psjjonathan]

Pretty damn cool

[@winfredj9820]

best stack

[@unity_12]

How nest video for motion ? 🎉