Тёмный
Tom Is Loading
Tom Is Loading
Tom Is Loading
Подписаться

Hey, I'm Tom, I write code and talk about it.

I primarily talk about HTML/CSS/JavaScript, React, Node, interviewing, Algorithms & Data Structures, and other stuff like that. I try to teach in a way that doesn't make you want to smack your face against your keyboard 🙂
The Advanced TailwindCSS Crash Course
37:39
2 месяца назад
4 Ways to Stop Writing Confusing React Code
6:35
3 месяца назад
Recreating Apple's Addicting Scroll Animation
18:25
3 месяца назад
Recreating Vercel's Addicting Navigation Menu
25:22
4 месяца назад
I Redesigned Everything
3:28
4 месяца назад
8 TailwindCSS Classes I Wish I Found Earlier
4:48
5 месяцев назад
Recreating GitHub's Fancy CSS Animation
11:15
5 месяцев назад
How to Build Mouse Hover Effects with ReactJS
16:26
6 месяцев назад
Комментарии
@caczus
@caczus День назад
You should try the next-view-transitions library from shuding
@squidux
@squidux День назад
😂 the intro got me....... helo
@0xAndy
@0xAndy День назад
Your presentation style is inspiring and I love the content as well. Thanks, Tom.
@tomisloading
@tomisloading День назад
Thank you so much!! 😁
@yuktijhawar6729
@yuktijhawar6729 День назад
Thank you so much for the video... You solved a very major problem of mine
@anuarshaidenov
@anuarshaidenov День назад
wow
@camilohuerta4994
@camilohuerta4994 День назад
very nice content! I'm learning a lot on how to use framer motion ;)
@crakyanime8903
@crakyanime8903 День назад
is tom still loading
@tomisloading
@tomisloading День назад
⏲️
@bioburden
@bioburden День назад
Thanks for quickly explaining cva, I was struggling to know the best way of implementing a design system with Tailwind.
@bioburden
@bioburden День назад
Great explanation and breakdown of the code. Straight to the point, which is great for those of us who are not absolute beginners. Keep up the great work
@moodyhamoudi
@moodyhamoudi 2 дня назад
Am I the only person that has issues with AnimatePresence leaving "ghost" components in the DOM? The transition will take place and then the element just stays in the document flow - it's very obvious when it's in an iterated list. Tends to happen a lot on mobile I've noticed
@Smartercow
@Smartercow 2 дня назад
Instead of the sleep function there's this: *import { setTimeout } from "node:timers/promises";* - It does the same and it's async
@r-i-ch
@r-i-ch 2 дня назад
Great stuff!!! A quick 2c is (and admittedly, I don’t much care for Tailwind), for some of the basic apparition stuff I wonder why not to use some CSS classes that can be toggled on and off to go forward and backwards? A downside would be the separation of concerns with mixing animation between css and framer, I guess. Also you need framer to update the other Todo in the list. Still, it seems like so much code inside of one <Todo> component that already takes 6 props and then we add some more internal state. Purely a gut feeling since this is awesome and obviously works! Super challenge could be adding an Undo capability to put things back here they were and re-expanding the list. Would it work if we broke the animate function defined in the useEffect out into its own? Thanks for the video!
@iamahtic
@iamahtic 2 дня назад
ur goated
@user-qj4rr1rm8i
@user-qj4rr1rm8i 2 дня назад
Great, great, excellent tip for me!!! I am so inspired. Thank you. Those classic jQuery animations were always a missing part for me while I'm working with react. Thank you very much.
@IntrovertedCoder
@IntrovertedCoder 2 дня назад
Hey Tom! I'm really looking forward for a framer motion course (paid) from you. Is it on your bucket list?
@tomisloading
@tomisloading 2 дня назад
Working on one now!! 😁 Going to be a pretty long course, so will be a couple of months before it’s out. I’m going to put a waitlist up in the next week or two though!
@24pratikbhagwat68
@24pratikbhagwat68 2 дня назад
​@@tomisloadingyeah man really wanna buy your framer motion course
@paulreynolds8050
@paulreynolds8050 2 дня назад
Once again a great example & explanation 👏 😊
@tomisloading
@tomisloading 2 дня назад
Thank you! 😃
@jazsouf
@jazsouf 2 дня назад
Thanks for the tutorial, I was always using AnimatePresence, but this usePresence looks quite handy!
@SơnHoàng-t1j
@SơnHoàng-t1j 2 дня назад
Thank you so much.=
@tomisloading
@tomisloading 2 дня назад
Of course! 😁
@Fleck10290
@Fleck10290 2 дня назад
Nicely explained. Thank you
@tomisloading
@tomisloading 2 дня назад
Thank you!! 😎
@ravijatav5419
@ravijatav5419 3 дня назад
i show you an animation can you please make it ?? Please reply!
@comfy6355
@comfy6355 3 дня назад
this was really easy to understand and follow along video! But I'm having a hard time understanding how your handleDragEndFunction knows what column the card is being dropped into if you never passed it?
@koustavchowdhury8210
@koustavchowdhury8210 3 дня назад
I saw this video after trying to understand from the docs. And I must say, you did commendable job explaining in a very simple manner. Kudos to you, man! And keep making such awesome videos
@favanzzo
@favanzzo 4 дня назад
hey tom, any plans on doing some courses?
@tomisloading
@tomisloading 4 дня назад
I’ve been saying i would for a while but I can confirm that I AM finally working on a framer motion course 😅
@ashishkumawat6110
@ashishkumawat6110 4 дня назад
That's just vanilla JS stuff
@null_spacex
@null_spacex 3 дня назад
But it's the way to do it in Next App Router right now..
@amey7064
@amey7064 6 дней назад
Good video 💯
@TrungNguyen-fi5ls
@TrungNguyen-fi5ls 6 дней назад
I thought we couldn't manipulate DOM ??? 8:23
@ohskynyrdlynyrd
@ohskynyrdlynyrd 7 дней назад
This is the best video on topic. I'm using next js so I'll try to do the same but to use cookies instead of local storage
@koresaliva
@koresaliva 7 дней назад
Extremely helpful thank you!
@optimusmam
@optimusmam 7 дней назад
You make it uncomplex an we are gratefull for that!
@randeeprana5622
@randeeprana5622 7 дней назад
Greate Share, You are making web animations easier for me
@loground
@loground 7 дней назад
Great as always, huge thanks!
@ChinnariNarashimha
@ChinnariNarashimha 8 дней назад
Is it responsive?
@NarcisoLobo
@NarcisoLobo 8 дней назад
Dope! Thanks man!
@7A7z
@7A7z 8 дней назад
im having some issues with the animations flickring
@ProLactationNation
@ProLactationNation 9 дней назад
Man.. If i would have the authority, I would give you a medal!
@irfansaeedkhan7242
@irfansaeedkhan7242 9 дней назад
nice nice need more of it
@Aman12q
@Aman12q 9 дней назад
Insane 🔥
@mirage4731
@mirage4731 9 дней назад
This was damn easy to understand, thank you for the video
@BooksWeCanRead
@BooksWeCanRead 9 дней назад
This is so cool! There could be a ‘new’ section on your website to keep up with all these cool new components! 😁💜✨
@tomisloading
@tomisloading 9 дней назад
Something like this or a changelog could be cool 😁
@BooksWeCanRead
@BooksWeCanRead 9 дней назад
@@tomisloading ooh! ✨
@collinsk8754
@collinsk8754 9 дней назад
Another great tutorial! Thanks. 🥳🥳
@essenc3189
@essenc3189 9 дней назад
hey tom, hi. can you somehow create LOCOMOTIVE scroll effect using framer motion ?
@tomisloading
@tomisloading 9 дней назад
Locomotive scroll is on the list!
@essenc3189
@essenc3189 9 дней назад
@@tomisloading hhm. I watched all of them , couple days ago and probably missed ? Okay thanks 🧡
@tomisloading
@tomisloading 9 дней назад
@@essenc3189 ah, I mean on my list of videos to make in the future haha 😁
@essenc3189
@essenc3189 9 дней назад
@@tomisloading thats why i missed it 😀 love you framer videos and they are vital for me as a framer motion user. I will wait for locomotive scroll 👌 cause i am needing of it 🔥
@abishek1808
@abishek1808 9 дней назад
Savage 🔥🔥🔥
@paulreynolds8050
@paulreynolds8050 9 дней назад
Awesome 😀🚀
@deepak8586
@deepak8586 9 дней назад
wow this is crazy!!
@gorynytch6553
@gorynytch6553 9 дней назад
YOU ARE A GOD 🙏🙏
@alishakhatri6919
@alishakhatri6919 9 дней назад
hey, can you make a video about Opposite Scroll Content ?
@tretiakdev
@tretiakdev 10 дней назад
Cool ❤
@user-vp5wr2tx9i
@user-vp5wr2tx9i 11 дней назад
Soo sexy
@jou3883
@jou3883 11 дней назад
Hi Tom! I implemented this in my current nextjs project. Somehow if I call the sleep function before removing the 'page-transition' class, it doesnt navigate to the page I clicked on immediately (which is what its supposed to do since we setTimeout to 500ms), but the previous page is still being displayed by like 2s before the page that is clicked on shows. But when I removed the sleep function after router pushes to clicked href, it worked. could this be a nextjs bug? or I'm doing something wrong? This only happens when I refresh the page and quickly navigates to other pages.
@RegalWK
@RegalWK 11 дней назад
Does this new TransitionLink component support prefetching? I assume yes since its native Link component with use client directive