How To Recreate AMAZING Text Animations in Figma

Поділитися
Вставка
  • Опубліковано 20 гру 2024

КОМЕНТАРІ • 72

  • @anish900ify
    @anish900ify Рік тому +13

    How has this channel still not blown up??
    I have been watching your videos for more than 6 months now, and I am always amazed by these tutorials on how easy they are to follow along.
    Keep up the good work! Thank you so much, Tim!!

    • @TimGabe
      @TimGabe  Рік тому

      Anish, that’s a comment that really makes me smile. thank you so much. 🙏
      super kind of you to say this, my friend 😃

  • @kishorekumarseenivasan
    @kishorekumarseenivasan Рік тому +2

    man when I get a job as a ux designer I want to gift you! thank you so much for providing us such a complex topic in an easy manner, lots of love from india. keep up the good work. 👏

    • @TimGabe
      @TimGabe  Рік тому

      really appreciate the support here, my friend! thank you!!

  • @jessaaaye6480
    @jessaaaye6480 Рік тому +6

    Can you create a step by step guide on how to do this as a total beginner? I've been at it for an hour and I can't get the Revealed to actually reveal itself. When I drag one of the containers from the component box, to the frame, they separate. The 'Revealed' text below the box is still showing when I click play on the flow. I'm just so confused, lost, and frustrated but I still really appreciate this video. So if you can shed some light on that, that'd be amazing. Thank you!

    • @cikpontiey
      @cikpontiey Рік тому +1

      Yeah same here

    • @TimGabe
      @TimGabe  Рік тому +1

      sorry about that!
      i'm currently very focused on framer videos, but next year i'll be back strong with figma if everything goes as planned! 🙏

    • @alyssamanning8213
      @alyssamanning8213 Рік тому

      Hey I figured out the solution to both of our problems because I was trying to myself and couldn't understand it at first. So if you go back to his previous tutorial on figma basics playlist he talks about constraints in oneof the videos. To answer your specific question all he did was select all of the letters that are stair stepped to each other and applied the verticle positioning to the bottom and then scrolled the bottom part of the container upward to create that effect of it appearing off the container. Hope this helps I'll leave the link to that video here as well.
      ua-cam.com/video/3xGJ80UpVeM/v-deo.html

    • @paulguido-g5x
      @paulguido-g5x 5 місяців тому

      Same here I can't get the Revealed to drop in, it just appears. It might have something to do with the organizing the letters outside of the frame but setting that part up isnt explained so I'm just hoping that I'm doing it right which clearly I'm not.

  • @creepygirl_123
    @creepygirl_123 Рік тому +4

    Thanks a lot Tim for this amazing episode ✨

    • @TimGabe
      @TimGabe  Рік тому +1

      thank you so much for the comment 🤩☺️

  • @GraveRave
    @GraveRave Рік тому +2

    Keep em coming

    • @TimGabe
      @TimGabe  Рік тому

      will keep them coming, my friend 🤩

  • @kassiopeya8740
    @kassiopeya8740 Рік тому +1

    awesome tutorial, thank you, Tim!

    • @TimGabe
      @TimGabe  Рік тому

      appreciate it, Kassiopeya 🤩 thank you!!

  • @viraj24_
    @viraj24_ Рік тому +2

    Wow! that's some cool stuff

    • @TimGabe
      @TimGabe  Рік тому

      happy you liked it Viraj! 🎉☺️

  • @gideonokwechi3501
    @gideonokwechi3501 Рік тому +1

    Love the revealed animation...I think you are my new favourite figma UA-camr... please more of this..

    • @TimGabe
      @TimGabe  Рік тому +1

      wow, I don't take these comments lightly - that's huge to me!! thanks so much, Gideon!!

  • @llu2736
    @llu2736 Рік тому +1

    This is great, Thanks Tim for always getting to the point and making the videos simple and short. Appreciate all efforts.

    • @TimGabe
      @TimGabe  Рік тому

      thank you for the cool feedback, my friend 😃 always appreciated!!

  • @nidarahman2305
    @nidarahman2305 Рік тому +1

    your content is so useful and fun to watch, i have been binge watching your videos lol. i have a request please make your mic a bit louder in your videos cause in some videos its somwhat difficult to hear you clearly.

    • @TimGabe
      @TimGabe  Рік тому

      haha, I love it! thanks for binge watching, Nida 🥳

  • @designwizard3109
    @designwizard3109 Рік тому +1

    Great tutorial sir❤️

    • @TimGabe
      @TimGabe  Рік тому

      really appreciated, my friend 💜

  • @hubertziemlewski1417
    @hubertziemlewski1417 Рік тому +2

    Bringing us amazing free content as always Tim! Thank you so much. Your videos are short and concise making them great ways to learn animations in Figma

    • @TimGabe
      @TimGabe  Рік тому

      that is so kind of you to say, Hubert! thanks a ton for the support 🤩🙏

  • @zeeshanishtiaq8722
    @zeeshanishtiaq8722 Рік тому +2

    is there any video on parallax scrolling???

    • @TimGabe
      @TimGabe  Рік тому

      not yet, but maybe that’s something that could come in the future 🤩

    • @zeeshanishtiaq8722
      @zeeshanishtiaq8722 Рік тому

      If so than please share an editable file of that

  • @dominicdavistv
    @dominicdavistv Рік тому +1

    Cheers thank you fella!

    • @TimGabe
      @TimGabe  Рік тому

      thank you for supporting!

  • @VanshikaDarode
    @VanshikaDarode Рік тому

    Greatttttttt video❤️ really helpful for self taught learners.

  • @samueledonkumoh-yu8yp
    @samueledonkumoh-yu8yp Рік тому +2

    so how did you add your container?...thought you were supposed to start from begining...

    • @TimGabe
      @TimGabe  Рік тому

      sorry about that, samuele!
      did you figure it out?

    • @samueledonkumoh-yu8yp
      @samueledonkumoh-yu8yp Рік тому

      @@TimGabe no, I just started using figma so it's still kinda strange...anything you could do sir?

  • @SashaAbayomi
    @SashaAbayomi Рік тому +2

    This is really helpful! Thank you for the video. I was wondering if you have a video or could provide steps on creating this from the very beginning? I am very much new to Figma and animations are still something I'm trying to understand. Thanks again!

    • @TimGabe
      @TimGabe  Рік тому

      hey Sasha! 😃
      I do have a full playlist on animations in Figma, you can find it here: ua-cam.com/play/PLOIq79MWqv84rUnHXGoS62GaQWorRSuQg.html

  • @artworthi
    @artworthi Рік тому +1

    the domino effect - what are you doing to offset the letters (other than doing everything manually, its very slow process I don't want to continue doing over and over again.

    • @TimGabe
      @TimGabe  Рік тому +1

      i'm afraid the manual process is the only way, my friend

  • @glenniemedlin4837
    @glenniemedlin4837 Рік тому +1

    Do I have to upgrade to a the profession subscription in order to do these animations?

    • @TimGabe
      @TimGabe  Рік тому

      no, it can all be done with just the basic figma sub!

  • @avelinileva
    @avelinileva Рік тому +1

    TOP!!! Thx

    • @TimGabe
      @TimGabe  Рік тому

      thanks for the comment, man!

  • @michaelharris8040
    @michaelharris8040 Рік тому +1

    Thank you

    • @TimGabe
      @TimGabe  Рік тому

      thank you for commenting, Michael 🙏

  • @YOUNG_work_song
    @YOUNG_work_song 4 місяці тому

    Thank you!!
    03:39

  • @isthatsharanya
    @isthatsharanya Рік тому +2

    Great stuff Tim! also why don't you promote yourself on Twitter ? the design community there is massive.

    • @TimGabe
      @TimGabe  Рік тому +1

      hey Sharanya! I need to step up my Twitter game for sure… thanks for the comment, my friend 😃

  • @theadhddesigner
    @theadhddesigner 5 місяців тому

    this was so helpful, but how do you make the domino effect work for multiple texts

  • @Victoria-hr6cc
    @Victoria-hr6cc Рік тому +1

    Thank you for the videos! I have a question about the frame container. Is it supposed to be that we create the components and then put them into a frame or create the component, put it into a frame and make another component including the frame?

    • @TimGabe
      @TimGabe  Рік тому

      I would put components into a frame (that isn't a component itself) 😃

  • @kamleshm789
    @kamleshm789 Рік тому +1

    Thank you for the amazing video. Can you create a video for Text highlight on scroll, exactly like 0:08 in your video but it animates on scroll up and down.

    • @TimGabe
      @TimGabe  Рік тому

      not making figma tutorials atm, but if you're into framer you'll be seeing a lot of animation content!

  • @luisaeusse7970
    @luisaeusse7970 8 місяців тому

    HI, I have a question, if I need to play the 3 animation, like the first then disappear and start the second then disappear and start the third and finish

  • @Lily-q4p2e
    @Lily-q4p2e 5 місяців тому

    how can I do Detach instance? in the new Figma

  • @ChristinaSegura-b8e
    @ChristinaSegura-b8e 10 місяців тому

    Sorry but the elevator one was so frustrating to do...I couldn't get the second text to be outside of the frame to clip it. How the heck did you do that?

  • @adied7725
    @adied7725 Рік тому +1

    how to animate like a typewriter for a whole paragraph of text ?, please.....either dissolve out and in or ??other

    • @TimGabe
      @TimGabe  Рік тому

      you would have to use this same technique (but probably with a faster animation) and then do it for every letter of the paragraph 😅

  • @alaamouhager9561
    @alaamouhager9561 19 днів тому

    HOW CAN I MAKE THE FRAM EMPTY AND THE WORDS ARE NOT IN THE FRAME ?

  • @sameer_nannaware
    @sameer_nannaware 20 днів тому

    0:08 how?

  • @madhoundes
    @madhoundes 8 місяців тому

    fun fact follow your tutorial to apply animation effect on framer 😁😁

  • @stampdedband
    @stampdedband Рік тому +2

    this whole video was confusing

    • @TimGabe
      @TimGabe  Рік тому

      ah, that sucks to hear! I know you say everything was confusing -- but could you pinpoint why?

    • @Notintheclub
      @Notintheclub Рік тому +1

      I didn’t get the domino effect. I wonder how did you make the text and also when I clip content for some reason the text still stays visible

    • @KaiLandolt
      @KaiLandolt Рік тому

      @@TimGabe It is confusing because this is not a step-by-step guide.
      If people already understand the components they are able to follow the guide

  • @mikaylajayy2388
    @mikaylajayy2388 Рік тому

    I wish you would move your face so I can see your layers- because I feel that while your explanations are great in some areas of the tutorial, it's not so great in the beginning and somewhat forces me to just use your work and reverse engineer it to teach myself- which I assume defeats the purpose of the video...

    • @mikaylajayy2388
      @mikaylajayy2388 Рік тому +1

      So for anyone who is wondering how to do the revealed effect and is having issues- Here's what I did to get it like the video. First, I just typed all of my letters in an upward fashion. I duplicated all of the letters and aligned vertical centers to get the dimensions for the container. Once I had to dimensions for the container I deleted the aligned letters. I created a new frame that was the dimensions of the aligned letters, (this is what he calls a container) I then made sure the frame I just created was deselected- and I selected all of my letters and nested them into the frame I just created (if it doesn't create a drop down, you're not nesting them correctly) and then from there you can follow the tutorial...

    • @KaiLandolt
      @KaiLandolt Рік тому

      @@mikaylajayy2388 Thankyou!

    • @TimGabe
      @TimGabe  Рік тому

      sorry about that!

    • @paulguido-g5x
      @paulguido-g5x 5 місяців тому

      Hi Mikaylajayy2388, you had mentioned that you figured out the "Revealed" domino effect from this tutorial. I'm still having trouble with it. Is it possible to get a little help on that?