Master Staggered Text Animations with Framer Motion
Вставка
- Опубліковано 20 лип 2024
- In this video, I'll show you how to craft captivating staggered text animations using Framer Motion, adding a touch of magic to your frontend projects. Text animations can add just that extra bit of story telling to your page. Watch out that you won't overdo it though!
In this video, we'll:
* Master the art of creating staggered text animations with Framer Motion.
* Learn how to synchronize animations with user scrolling for a dynamic user experience.
* Explore the looping effect to give your animations that extra flair.
Whether you're a seasoned developer looking to add an extra layer of interactivity to your websites or a beginner eager to explore the possibilities, this video is for you. It's a quick and practical guide that you can implement right away in your projects.
By the end of this video, you'll have the skills to craft stunning staggered text animations that grab your viewers' attention.
✨ Become a PRO today via www.frontend.fyi/pro
💬 Join us on Discord: www.frontend.fyi/discord
🔗 Check the code and read the article: www.frontend.fyi/v/staggered-...
👀 Timestamps
00:00 - Intro
01:35 - What we will be building
02:28 - Start coding
03:27 - Split the words in individual letters, but preserve accessibility
04:48 - First animation steps
05:28 - Add staggering to the animation
08:14 - Make the animation trigger on scroll
09:55 - Trigger animation only once
11:30 - Adding support for multiple words
13:25 - Support multiple sentences
15:15 - Make the animation loop, by using animation controls
20:18 - Outro
#framermotion #frontend - Наука та технологія
Don’t forget to signup for PRO while it’s still €99! I’m working hard on getting the framer motion course that is part of it out as soon as possible.
Pro is a single purchase with lifetime free new content!
More here: www.frontend.fyi/pro
I really want to get the membership, but I need to see the content first , I don’t even mind paying more but at the moment it’s a little scary putting money into something that doesn’t have much. But I know the course will be great just like your content, cannot wait for the courses to come out , when they do will definitely buy it
@virtualstavsavv9242 makes a lot of sense! In this video you see a preview of the course page. That will be live really soon, and will also include the complete curriculum. If you subscribe to the newsletter you will get an email when that goes live.
Any updates on localized prices? 90 Euro where I live is a looot of money
Please send an email to jeroen@frontend.fyi!
this is genius what the hell, as a react frontend noob my eyes have been opened.
Man if this is something you post for free, i cant imagine the course content. Its gonna be next level ❤
That’s so kind!! Thank you so much! I’ll do my very best to blow you away! And as soon as the first paid course is up, the platform is also ready to start pushing out more pro content even faster!
@@frontendfyi very excited for this 🥳
This channel is truly a godsend🔥
Beautifully delivered 😊 i love framer motion
As always, your content is awesome.
This is fantastic, thank you so much for this excellent tutorial!
Hi! I love your content instantly. Great stuff. Would you consider making a video what's the best way to easily do quick project setups using tools like Vite and what deployment might look like? Whether to choose react, or vanilla etc?
This video is quintessence of useful! Very, very much thank you!
This channel is literallt godsent ❤
wonderfull! thanks
we love it
one of the most underrated channels ever
Appreciate it! Thank you 🙏
dude that was help full
thanks.
Glad it was helpful! Thanks for letting me know 🙏
Hi Jeroen, great great content! If I was to receive a text from an external source as a single string though, how could I break it into individual lines? Do you have a take on that? I'm facing exactly this issue right now.
What font do you use in your editor? Btw great content
Didn't know Framer Motion was this easy to work with! I usually went for GSAP but I think I'll try Framer Motion again thanks to your great content. Looking forward to learn more great stuff from you! BTW, I really like how your theme pops with color but I couldn't identify it, could you tell me the name of the theme please?
Thank you so much! Glad I could convince you to try it 😁
The theme is part of the Bearded Theme collection, and the theme specifically is called Arc. See here: github.com/BeardedBear/bearded-theme
The font is Recursive Mono Casual Static.
@@frontendfyi Aaah the Bearded Theme, I'll definitely try it out as I couldn't make up my mind due to the vast options it has. I've never heard about that font before so I'll have a look at it as well, I usually use JetBrains Mono but I could use a fresh look. Thank you so so much!
Great! Very helpful video!
Cheers from Brasil! \o/
Thanks! Glad you liked it 🙏
thank you
very useful, thank you king
🫡
Is it possible to make the animation going with scroll instead of just playing forwards? Like GSAPs scrub option
Cool explanation as always. That would be great if it reverse the text back to hidden before repeat again. But thank you.
It can! Just add the stagger to the hidden too, but than as -0.01!
Awesome video - love Framer Motion!
Setting the variants object on the child and not just the top parent element feels a bit counter intuitive in my head. Would it still work with the variants object set on the same element as you have the initial and animate defined on?
I agree it might feel a bit counter intuitive yeah. However, it is needed in order to set the 'staggerChildren', because the parent, in case of staggering, controls the animation state of the children. So you can definitely move the variants to the child, but in that case you don't have the staggering effect.
Although while I'm typing this I'm thinking you could perhaps add the delay property to the transition of the 'visible' state, and then use the stagger function from framer motion to add the same effect. That might very well work I think! Like: visible: { transition: { delay: stagger(0.1) } }.
Let me know if that worked!
12:56 you can also use white-space: pre; to preseve the white-space, without the need to create a span just for that
Nice!! Never thought of using white space pre for this. Great suggestion!
Broo love your content, what theme are you using? Looks fun
Thanks man!! Appreciate it!
The theme is part of the Bearded Theme collection, and the theme specifically is called Arc. See here: github.com/BeardedBear/bearded-theme
this very impressive... buh i really need a job..
❤🔥❤🔥
Excuse me, is there a way for me to do an infinite animate change the text whileInView? Ex: when I scroll down, this text while changes from "A text" to "B text" with an infinite loop?
can these stagger animation be controlled by the scrollYprogress
Y motion is not working with opacity but Independently without opacity Y motion is working. Can Somebody Help Please 🙏
What eyeglasses frames are you wearing? :)
Hahaha love this question!
Not sure where you live, but the glasses are made by a European company called Ace and Tate. I thought they were only Dutch company, but apparently they have locations in multiple countries, so maybe there's one near you!
The glasses are called Neil Windsor Rim Tigerwood:
www.aceandtate.com/nl/neil-windsor-rim-satin-gold-tigerwood
WHat was his name again ?
Hahaha. It is Jeroen. A Dutch name that outside of this country is almost impossible to pronounce, let alone remember..
I'm the first hehe
🙌
😂
hello sir - im from Argentina - 99 euros its more than 10.000 pesos can you make some kind of discount cupon for us ?
thanks so much sir
super ! ❤ frontendfyi