Lightweight CSS Animations on Scroll using Alpine JS

[@sonyarianto]

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]

Awesome to hear that :)

[@webdevluc]

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

[@Thirus]

Yes, it goes great on landing pages

[@talkathiriify]

Excellent as usual Thank you so much Shruti.

[@Thirus]

You’re welcome :)

[@necatbolpaca7882]

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

[@Thirus]

Thank you so much for those words! :)

[@vincentgaliano]

Great, perfectly explained, thanks !

[@Thirus]

You’re welcome!

[@danielrodas7692]

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]

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

[@tomasslezak3628]

Great video. More Alpine videos 🙂

[@Thirus]

Thank you! More on the way

[@ahmadumar9387]

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]

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]

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

[@foupax]

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]

Thanks for the solution

[@wieN4rn0]

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

[@wieN4rn0]

after googling, I found the solution

[@jamesbatbondman988]

wow thank you very much

[@ebubeanyanwu8516]

Thank you so much for sharing.

[@Thirus]

You’re welcome!

[@bhushansontakke3614]

very helpful Thank You So Much👍👍

[@Thirus]

You’re welcome :)

[@DhiBeney]

Great tutorial. Thank you

[@Thirus]

Welcome :)

[@bjornleonhenry9750]

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

[@deepdive429]

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

[@Thirus]

Yea! It makes you a better designer

[@arupde6320]

keep uploading . good one ..

[@Thirus]

Sure, thank you!

[@luismoriguerra669]

amazing!

[@Thirus]

Thank you!

[@softwarejobkosam7327]

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

[@wieN4rn0]

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

[@Thirus]

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]

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

[@gpecs]

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]

I’ve replied to your DM on Twitter

[@gpecs]

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

[@kprakash9665]

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

[@Thirus]

You need to have a good foundation of CSS. And then you can start watching all my tutorials on this playlist: kzbin.info/aero/PLrC_WsW4VdT4k3LWVFpTGM4ryYlDnrEvz

[@kprakash9665]

@@Thirus thanks for your valuable reponse madam

[@lakshmichaitanya1316]

Need videos on vue please

[@andreanfirdhaus]

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

[@Thirus]

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

[@pging8328]

hey can you do tutorials in Malayalam?

[@Thirus]

Sorry I don’t know Malayalam

[@venkatesht6004]

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