Elegant Text Reveal Effect using React and Framer Motion | Letter-By-Letter Text Animation

Elegant Text Reveal Effect using React and Framer Motion.Letter-By-Letter Text Animation.
In This tutorial I'll be teaching you how to create beautiful letter-by-letter text reveal animation. We'll use React and Framer Motion library for the declarative approach on defining animations.
Subscribe for more videos like this: / @vladyslavdihtiarenko
Blog post: www.vd-develop...
Let's connect:
Website: www.vd-develop...
Blog: www.vd-develop...
Instagram: / vladislavdegtyarenko
Telegram: t.me/@Vladislav_Degtyarenko
#WebDev #Javascript #React #Animation #React #TypeScript #FramerMotion #TextAnimation #Tutorial #TextReveal #JS

[@VladyslavDihtiarenko]

Welcome! I just started my channel and this is the first time I make KZbin tutorials. If you find this video helpful, consider hitting the like button and subscribe to my channel. This will help me to stay motivated in the long run. Btw, I'd be more than happy if you share your suggestions and tips on how I can make my tutorials better. Thanks a lot!

[@safkatsadli1374]

Finally KZbin suggested me something very useful. Thank you sir

[@VladyslavDihtiarenko]

You're very welcome!

[@merictunc]

Thank you!

[@BlueSaturnn]

Great video and easy to follow! Thanks man!

[@VladyslavDihtiarenko]

Glad you liked it!

[@sankasanjeeva1182]

Nice video 😍. One thing, if we use char as the key it will thow an error saying "Encountered two children with the same key" since there could be same letters. Instead we can use React.Children.map(chars, char => {char})

[@VladyslavDihtiarenko]

Thanks for sharing your advice! Evenmore, we can use indexes for two reasons: 1) Our text is a static lightweight DOM content that we don't expect to change 2) React actually uses indexes for key attrubute as a fallback

[@MrSeredan]

Чудове відео! Дякую

[@sumitsinha995]

Hey pal, make more videos like this. Also, could you provide a sheet in which the generally used animations are listed? It's hard to find them by name.

[@VladyslavDihtiarenko]

Hi and welcome to my channel! While searching for animations, I noticed that people tend to name them as they please. There doesn’t seem to be a standardized set of animation names.

[@sumitsinha995]

@@VladyslavDihtiarenko thanks pal for replying but can you ping me common ones.And where you learned from.

[@u9s0e9r]

I wonder if having every single character placed inside a span tag affect SEO and indexation?

[@mohitashliya8750]

Yes I am also curious about this question

[@VladyslavDihtiarenko]

I'm also wondering... After doing some research, I've seen lots of discussions about this on Reddit, Stackoverflow, and other places. Most people say that the element doesn't affect SEO. However, they mostly guessing, so they not 100% sure :)

[@mohitashliya8750]

@@VladyslavDihtiarenko Thanks bro you have done your homework

[@bubbajaydee10]

You add a duplicate span tag for screen readers only, making it invisible. You can use the sr-only tailwind utility class for reference . Wrap a Span over the split span tags and label it aria hidden to screen readers don’t read the individual chars

[@voldemortvi4264]

oh man the video is so good and i have learned few things from it , may i ask how did you learn Regex because im having hard time learning it

[@VladyslavDihtiarenko]

This was the most disgusting theme I had ever encountered. One time I even got a burnout while trying to understand regex.😂 Start with little steps towards learning it, like 5-10 mins a day. I recommend to google "freeCodeCamp regex", they have really good articles.

[@dhruvbhatnagar4734]

can you show me how to do this using tailwind css in react ?? it's urgent i have a test for my internship

[@VladyslavDihtiarenko]

Contact me via Telegram, and I'll try to help you: t.me/Vladislav_Degtyarenko

[@TheSessionStarts]

Hey Brother thank you for the amazing video, is there anyway I can connect with you? Id like to know more of how you approached different problems :)

[@VladyslavDihtiarenko]

Hi, welcome to my channel! Currently, I don't have any special community or chat for my subscribers. Probably, I'll create it later. For now, you can contact me through social media. I do prefer Telegram or Instagram. Here's the links: t.me/Vladislav_Degtyarenko instagram.com/vladislavdegtyarenko/

[@safkatsadli1374]

haha did it , thank you man

[@VladyslavDihtiarenko]

🔥

[@RaJat2905_]

Hey pal, I wish to learn MERN full Stack web development. So, please suggest me appropriate course for MERN

[@VladyslavDihtiarenko]

kzbin.info/www/bejne/eaemmoGbgdONZpI everything from Dave Gray is a gem 💎

[@RaJat2905_]

Thanks 🙂

[@VladyslavDihtiarenko]

@@RaJat2905_ 😎

[@Dharmic_developer]

Nice vid❤

[@VladyslavDihtiarenko]

Thanks!

[@ahmedahmedx9600]

Why creating bunch of spans, can we just do it without creating lot of span for each character ?

[@VladyslavDihtiarenko]

I haven't found any other way to handle animation for each character. Because of splitting text into individual HTML element, we are able to manipulate them with Javascript to perform CSS transitions. The element itself is just a markup element with no semantic meaning. I guess you've got SEO concerns, however after making a research, I found that It doesn't hurt search engine rankings. It's important to note that even GSAP's SplitText function uses this method.