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

แชร์
ฝัง
  • เผยแพร่เมื่อ 27 ต.ค. 2024

ความคิดเห็น • 22

  • @a_tabaza
    @a_tabaza ปีที่แล้ว +1

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

  • @JimmyCeeTV
    @JimmyCeeTV 5 หลายเดือนก่อน +2

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

  • @SuperRAilya
    @SuperRAilya ปีที่แล้ว +1

    22:25 motion one
    24:14 timeline

  • @greendsnow
    @greendsnow ปีที่แล้ว +1

    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
      @sekeidesign  ปีที่แล้ว

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

  • @666Bockwurst666
    @666Bockwurst666 ปีที่แล้ว

    love the svelte content :)

    • @sekeidesign
      @sekeidesign  ปีที่แล้ว

      I'm glad! I love working with it

  • @slashritesh
    @slashritesh 11 หลายเดือนก่อน

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

  • @tgkhalil
    @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!

  • @greendsnow
    @greendsnow ปีที่แล้ว +1

    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
    @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
      @sekeidesign  ปีที่แล้ว

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

    • @budivoogt491
      @budivoogt491 10 หลายเดือนก่อน

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

  • @atakann
    @atakann ปีที่แล้ว

    I can hear the beats says Welcome to the Jungle!

  • @psjjonathan
    @psjjonathan ปีที่แล้ว

    Pretty damn cool

  • @catalincatalin4101
    @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
      @sekeidesign  ปีที่แล้ว +1

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

    • @catalincatalin4101
      @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
      @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
      @catalincatalin4101 ปีที่แล้ว

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

  • @winfredj9820
    @winfredj9820 3 หลายเดือนก่อน

    best stack

  • @unity_12
    @unity_12 ปีที่แล้ว

    How nest video for motion ? 🎉