Staggered Text Animations with React and Framer Motion

Animated UI components for React, Tailwind CSS, Framer Motion & More ✨ www.hover.dev
Today we'll build what might just be THE MOST common animation for Awwward winning websites using React, TailwindCSS and Framer Motion!
📚 Project Links
Code: www.hover.dev/components/links
🔗 My Links
TikTok: / tomisloading
Instagram: / tomisloading
GitHub: github.com/TomIsLoading
Twitter: / tomisloading
Discord & more: linktr.ee/tomisloading
Portfolio templates: tomisloading.gumroad.com/
Website: www.hover.dev
Timeline:
0:00 - Introduction
0:24 - How it's going to work
1:51 - Let's start coding
6:48 - Splitting up the letters of the animation
9:07 - Staggering the animation

[@shadowslayer2248]

With these awesome explanations and a solid grasp over framer motion, I think you should start making entire Awwwards website UI clones and also Awwards+ dribbble effects so that we have plenty of crazy ideas that will help in our own future websites

[@tomisloading]

I DEFINITELY want to do this, just a lot of work with everything else I’m working on right now 😂😂 I will eventually though!

[@mumk]

Phantasmic video, thanks&cheers

[@MahmoudGamal-sx3bj]

started playing around with framer motion cuz of your vidz 🔥

[@sahilverma_dev]

The framer king is back 🫡

[@felipefregginrules]

Honestly your tutorials are Sooooo damn good. How do you not have more subscribers!!!😢

[@pierceneupane8056]

Thank you so much the day before i was trying so hard with framer-motion but done with gsap

[@nexxai]

Goddamn man, it's genuinely insane how accessible you make literal award-winning design ideas. I am kind of at a loss for words at how much I enjoy watching your videos. Literally my only complaint is that I have to wait a week between uploads lol Keep up the amazing work, brother ❤

[@tomisloading]

That’s so nice of you 😭

[@o_oyash]

Really easy to follow an understand thanks for the video

[@tomisloading]

Happy to help! :)

[@chopsueey]

Straight to the point with valueable information, tyvm 👌

[@ilan117]

Tom ❤ please give us more 🤲 it’s just amazing , very short and very pleasing 😍 … I hope you do consider more of that.

[@Forsvinne77]

Really nice content as always...massive thanks, Tom.

[@-devjay]

looks amazing

[@tomisloading]

Thank you! 😁

[@collinsk8754]

Very clear explanation! Thanks! 🙌🙌

[@osarolawani3739]

Thank you I really needed this Can you do preloader animations next

[@tomisloading]

Possibly!

[@iamahtic]

Looks good

[@tomisloading]

Thanks!

[@BooksWeCanRead]

You are awesome!!!

[@treyrader]

haha yea i see those everywhere. Man you ever learned gsap? I feel that gsap is the future. It's kinda ugly but new packages recently is making it a lil more declarative or "react"ive

[@shubhamkukrety6355]

GSAP is fun until you're a bootstrapped business that needs to ship it to production. There are better open-source alternatives.

[@treyrader]

@@shubhamkukrety6355 yea it ain’t easy to write good, production ready gsap. But some cool new packages recently that deals with clean up specific to react.

[@Solo_playz]

Can you recreate the caldotcom infinite testimonial slider section? I tried a lot from my end and able to achieve the same but ofcourse with lot of bugs and code meeesss 😂😂 Thank you in advance ❤

[@tomisloading]

That’s on my list! 😁

[@Solo_playz]

@@tomisloading So I'm in waiting list 😁

[@ritikkharya8576]

what you gonna say about patreon ui?