Master Staggered Text Animations with Framer Motion

Ғылым және технология

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

Пікірлер: 53

  • @frontendfyi
    @frontendfyi8 ай бұрын

    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

  • @virtualstavsavv9242

    @virtualstavsavv9242

    8 ай бұрын

    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

  • @frontendfyi

    @frontendfyi

    8 ай бұрын

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

  • @moodyhamoudi

    @moodyhamoudi

    6 ай бұрын

    Any updates on localized prices? 90 Euro where I live is a looot of money

  • @frontendfyi

    @frontendfyi

    6 ай бұрын

    Please send an email to jeroen@frontend.fyi!

  • @xsls0n
    @xsls0n8 ай бұрын

    This channel is truly a godsend🔥

  • @mj2758
    @mj27588 ай бұрын

    Beautifully delivered 😊 i love framer motion

  • @sahilverma_dev
    @sahilverma_dev8 ай бұрын

    As always, your content is awesome.

  • @numanxaziz
    @numanxaziz8 ай бұрын

    Man if this is something you post for free, i cant imagine the course content. Its gonna be next level ❤

  • @frontendfyi

    @frontendfyi

    8 ай бұрын

    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!

  • @numanxaziz

    @numanxaziz

    8 ай бұрын

    @@frontendfyi very excited for this 🥳

  • @k8hansen
    @k8hansen5 ай бұрын

    This is fantastic, thank you so much for this excellent tutorial!

  • @syndg
    @syndg8 ай бұрын

    This channel is literallt godsent ❤

  • @knkitsune
    @knkitsune8 ай бұрын

    This video is quintessence of useful! Very, very much thank you!

  • @MarkHerpich
    @MarkHerpich8 ай бұрын

    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?

  • @luabfr
    @luabfr5 ай бұрын

    wonderfull! thanks

  • @gargola1754
    @gargola17543 ай бұрын

    very useful, thank you king

  • @frontendfyi

    @frontendfyi

    3 ай бұрын

    🫡

  • @arshiaranjbar7063
    @arshiaranjbar7063Ай бұрын

    dude that was help full thanks.

  • @frontendfyi

    @frontendfyi

    27 күн бұрын

    Glad it was helpful! Thanks for letting me know 🙏

  • @user-yi3rq7jk2r
    @user-yi3rq7jk2r8 ай бұрын

    we love it

  • @wulantsabita9843
    @wulantsabita9843Ай бұрын

    one of the most underrated channels ever

  • @frontendfyi

    @frontendfyi

    Ай бұрын

    Appreciate it! Thank you 🙏

  • @teksdesign
    @teksdesign7 ай бұрын

    thank you

  • @kennethpole2736
    @kennethpole27367 ай бұрын

    What font do you use in your editor? Btw great content

  • @alfieqashwa5257
    @alfieqashwa52578 ай бұрын

    Cool explanation as always. That would be great if it reverse the text back to hidden before repeat again. But thank you.

  • @frontendfyi

    @frontendfyi

    8 ай бұрын

    It can! Just add the stagger to the hidden too, but than as -0.01!

  • @berkayurun
    @berkayurun8 ай бұрын

    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?

  • @frontendfyi

    @frontendfyi

    8 ай бұрын

    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.

  • @berkayurun

    @berkayurun

    8 ай бұрын

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

  • @user-no7qd6bh3q
    @user-no7qd6bh3q8 ай бұрын

    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.

  • @capricorn.engineering
    @capricorn.engineering7 ай бұрын

    Broo love your content, what theme are you using? Looks fun

  • @frontendfyi

    @frontendfyi

    6 ай бұрын

    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

  • @hampusnilsson2389
    @hampusnilsson23898 ай бұрын

    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?

  • @frontendfyi

    @frontendfyi

    8 ай бұрын

    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!

  • @MarkHerpich
    @MarkHerpich8 ай бұрын

    Is it possible to make the animation going with scroll instead of just playing forwards? Like GSAPs scrub option

  • @moodboost3980
    @moodboost39803 ай бұрын

    this very impressive... buh i really need a job..

  • @serifcolakel823
    @serifcolakel8238 ай бұрын

    ❤‍🔥❤‍🔥

  • @theriser8751
    @theriser87518 ай бұрын

    12:56 you can also use white-space: pre; to preseve the white-space, without the need to create a span just for that

  • @frontendfyi

    @frontendfyi

    8 ай бұрын

    Nice!! Never thought of using white space pre for this. Great suggestion!

  • @motbannaoay4457
    @motbannaoay44574 ай бұрын

    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?

  • @AVIJITSARKAR-vp4sq
    @AVIJITSARKAR-vp4sq8 ай бұрын

    can these stagger animation be controlled by the scrollYprogress

  • @pragathrao1901
    @pragathrao19015 ай бұрын

    Y motion is not working with opacity but Independently without opacity Y motion is working. Can Somebody Help Please 🙏

  • @thelord982
    @thelord9825 ай бұрын

    What eyeglasses frames are you wearing? :)

  • @frontendfyi

    @frontendfyi

    5 ай бұрын

    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

  • @didemkucukkaraaslan7373
    @didemkucukkaraaslan73738 ай бұрын

    I'm the first hehe

  • @frontendfyi

    @frontendfyi

    8 ай бұрын

    🙌

  • @hiyankey

    @hiyankey

    8 ай бұрын

    😂

  • @ryanlog
    @ryanlog8 ай бұрын

    WHat was his name again ?

  • @frontendfyi

    @frontendfyi

    8 ай бұрын

    Hahaha. It is Jeroen. A Dutch name that outside of this country is almost impossible to pronounce, let alone remember..

  • @ruseto1
    @ruseto15 ай бұрын

    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

  • @hiyankey
    @hiyankey8 ай бұрын

    super ! ❤ frontendfyi

Келесі