Lightweight CSS Animations on Scroll using Alpine JS

Поділитися
Вставка
  • Опубліковано 19 вер 2024

КОМЕНТАРІ • 51

  • @sonyarianto
    @sonyarianto 2 роки тому +3

    I like the way you explain something, start with the end result and then how to achieve that step by step, not so many tutorial like that nowdays, thank you

    • @Thirus
      @Thirus  2 роки тому

      Awesome to hear that :)

  • @webdevluc
    @webdevluc 3 роки тому +3

    Awesome tutorial Shruti, the animations you are teaching spice up that beautiful landing page. It's great to learn with real life projects

    • @Thirus
      @Thirus  3 роки тому +1

      Yes, it goes great on landing pages

  • @talkathiriify
    @talkathiriify 3 роки тому +2

    Excellent as usual
    Thank you so much Shruti.

    • @Thirus
      @Thirus  3 роки тому

      You’re welcome :)

  • @necatbolpaca7882
    @necatbolpaca7882 3 роки тому +2

    Go Thirus, go! Short, understandable and practically usable videos keep coming. You are amazing.

    • @Thirus
      @Thirus  3 роки тому +1

      Thank you so much for those words! :)

  • @vincentgaliano
    @vincentgaliano 7 місяців тому +1

    Great, perfectly explained, thanks !

    • @Thirus
      @Thirus  7 місяців тому

      You’re welcome!

  • @danielrodas7692
    @danielrodas7692 3 роки тому +1

    Great video! Would love to see a video where you create a landing page with a scrollspy feature using Tailwind and Alpine's viewport function. Like the scrollspy in bootstrap I mean. Keep it up!

    • @Thirus
      @Thirus  3 роки тому +1

      I was planning for the same next :) Glad you liked this

  • @tomasslezak3628
    @tomasslezak3628 3 роки тому +1

    Great video. More Alpine videos 🙂

    • @Thirus
      @Thirus  3 роки тому +1

      Thank you! More on the way

  • @DhiBeney
    @DhiBeney 3 роки тому +1

    Great tutorial. Thank you

    • @Thirus
      @Thirus  3 роки тому

      Welcome :)

    • @bjornleonhenry9750
      @bjornleonhenry9750 2 роки тому

      I like your videos, u are a good teacher, thank u ma'am

  • @foupax
    @foupax 3 роки тому +2

    Why do I get "tailwind mode' is not recognized as an internal or external command" on windows
    Solution: npm install cross-env - Then add on package.json cross-env before TAILWIND_MODE and cross-env before NODE_ENV=production

    • @Thirus
      @Thirus  3 роки тому

      Thanks for the solution

    • @wieN4rn0
      @wieN4rn0 3 роки тому

      How to add it? with "build" or other approach?

    • @wieN4rn0
      @wieN4rn0 3 роки тому

      after googling, I found the solution

    • @jamesbatbondman988
      @jamesbatbondman988 3 роки тому

      wow thank you very much

  • @ebubeanyanwu8516
    @ebubeanyanwu8516 2 роки тому +1

    Thank you so much for sharing.

    • @Thirus
      @Thirus  2 роки тому

      You’re welcome!

  • @deepdive429
    @deepdive429 3 роки тому +2

    I'm just pathetic in design but still like tailwind css a lot just because the way it works and its utility.

    • @Thirus
      @Thirus  3 роки тому

      Yea! It makes you a better designer

  • @ahmadumar9387
    @ahmadumar9387 4 місяці тому +1

    Dear @Thirus i love your content, actually i'm a backend developer and your tutorials help me to understand how frontend could be so easy :)
    therefore i'd like to know, what is the purpose of of postcss in modern days? i always use 'pnpm dlx tailwindcss -i ... -o ... --minify --watch' instead. And i got always the same minimized css output :) hence what is the advantage of post now?

    • @Thirus
      @Thirus  4 місяці тому +1

      This video was created long ago. Back then this was how Tailwind CSS could be installed. You can ignore it now.
      And glad to hear that you enjoy my videos!

    • @ahmadumar9387
      @ahmadumar9387 4 місяці тому

      @@Thirus yeah i really enjoy that, therefore i wish you will release an animation course with tailwind and alpine... but unfortunately, that isn't your aim right now😅

  • @bhushansontakke3614
    @bhushansontakke3614 7 місяців тому +1

    very helpful Thank You So Much👍👍

    • @Thirus
      @Thirus  7 місяців тому

      You’re welcome :)

  • @arupde6320
    @arupde6320 3 роки тому +1

    keep uploading . good one ..

    • @Thirus
      @Thirus  3 роки тому

      Sure, thank you!

  • @softwarejobkosam7327
    @softwarejobkosam7327 3 роки тому +1

    Its should be great if will you post video on frontend react

  • @luismoriguerra669
    @luismoriguerra669 3 роки тому +1

    amazing!

    • @Thirus
      @Thirus  3 роки тому

      Thank you!

  • @gpecs
    @gpecs 2 роки тому +1

    Awesome tutorial and good job.
    Pls, I want to create background images which will slide within seconds and fade out as it slides. Using tailwind css how do I go about it?

    • @Thirus
      @Thirus  2 роки тому

      I’ve replied to your DM on Twitter

    • @gpecs
      @gpecs 2 роки тому

      @@Thirus thanks so much.
      have done it now with pure css can i bring back to tailwindcss?

  • @wieN4rn0
    @wieN4rn0 3 роки тому +1

    I saw on your html file you have tailwind css class min-w-[360px], what does it mean?

    • @Thirus
      @Thirus  3 роки тому +1

      Using “Jit” mode of tailwind, you can add arbitrary values like 360px of width within square brackets.
      Something like m-[1.9rem] would mean margin: 1.9rem

    • @wieN4rn0
      @wieN4rn0 3 роки тому +1

      Thanks for the prompt response. I'll be asking you a lot of questions in future.

  • @lakshmichaitanya1316
    @lakshmichaitanya1316 3 роки тому +2

    Need videos on vue please

  • @kprakash9665
    @kprakash9665 3 роки тому +1

    Madam i m very beginer .......with what concepts i have to start first to learn in tailwind css to become good programmer...

    • @Thirus
      @Thirus  3 роки тому

      You need to have a good foundation of CSS. And then you can start watching all my tutorials on this playlist: ua-cam.com/play/PLrC_WsW4VdT4k3LWVFpTGM4ryYlDnrEvz.html

    • @kprakash9665
      @kprakash9665 3 роки тому +1

      @@Thirus thanks for your valuable reponse madam

  • @andreanfirdhaus
    @andreanfirdhaus 3 роки тому +1

    hello mom, why doesn't it work even though I've followed the steps from the beginning

    • @Thirus
      @Thirus  3 роки тому

      Did you try cloning this repo and cross-checking?
      github.com/ThirusOfficial/animate-on-scroll-alpinejs

  • @pging8328
    @pging8328 2 роки тому

    hey can you do tutorials in Malayalam?

    • @Thirus
      @Thirus  2 роки тому

      Sorry I don’t know Malayalam

  • @venkatesht6004
    @venkatesht6004 3 роки тому

    Madam start jquery complete videos for beginners because poor unemployment people more useful for job plz understand my feelings mam