Marquee/Scrolling Text Animation in Figma | QuickJam

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

КОМЕНТАРІ • 152

  • @jammedstudio
    @jammedstudio  Рік тому +7

    Are you enjoying UI animation-related Quickjams? Let me know your thoughts below & leave recommendations!
    Watch how to design icons the right way:
    ua-cam.com/video/BiHlq3ssuAE/v-deo.html

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

      I tried the animation but it didn't work on my side ...is there a way I can reach out to you for more clarity ?

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

      @KeezyPm Helloo, sure thing.
      You may reach me out by mail on my about page. 👌

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

      @@jammedstudio Okay , I sent you a private message on your Behance account sir ...I can't find a mail link on your bio

  • @jesbryant9392
    @jesbryant9392 6 днів тому

    This is the third video I've watched on how to get the scrolling text effect in figma. By far the best explained.

  • @lawlessofarabia
    @lawlessofarabia Рік тому +9

    Quick and simple, here's a man who knows his stuff. Thank you for this super quick and easy tutorial Mr Jammed.

  • @mohitashliya8750
    @mohitashliya8750 2 місяці тому +1

    Straight to the point no gibberish Thanks man.

  • @ame6863
    @ame6863 29 днів тому

    oh my god i finally got it. i trusted you because i was like it's not this person's fault it's gotta be something i was doing. it was the way i was pasting it into my website screen. thank you

  • @loomonda18
    @loomonda18 Рік тому +5

    I could not figure out why the animation wasn't working...had to refresh - thanks so much!!

  • @Omar-w5d2m
    @Omar-w5d2m 9 місяців тому +2

    Thank you for the quick and simple tutorial. At first the animation wasn't working, I refresh Figma and then it worked. It's weird though because every time I open Figma it doesn't work, I have to always refresh by pressing R. It's probably a Figma problem.

  • @michayiko
    @michayiko 10 місяців тому +1

    Thank you so much !! I've been trying to understand variables for a while now, much clear clear now !

  • @cozytender
    @cozytender 6 місяців тому +1

    You're amazing! Thank you for the simple, straight to the point tutorial. It helped so much.

  • @Ayeshaedrith
    @Ayeshaedrith 11 місяців тому

    It works and I’m so shocked. Thank you so much. May you be rewarded abundantly ❤️

    • @jammedstudio
      @jammedstudio  11 місяців тому

      Thank you! Glad it worked. :)

  • @aapopow
    @aapopow 9 місяців тому +2

    For all those wondering why their proto doesn't work: you need need to set the flow starting point and pull lines from each of your frames to the next. If you only have one frame, select it -> prototype -> Flow staring point.

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

    You're a genius bro!! You've helped me to solve one problem that I've been having hahaha. Thank u so much.

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

      @@melaniedesigner Welcome! Good luck 🤞

  • @projekt.amadeus
    @projekt.amadeus Рік тому +1

    Thanks! I've been looking for this for a long time!

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

    That’s the best video i have seen on this! it was so easy 🙏🏻

  • @cesara.pichardo2368
    @cesara.pichardo2368 Рік тому

    Excelent tutorial! Quick and simple. i didn't know it was possible to do that in figma. Thanks!

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

    thank you so much for this, i am definitely subscribing immediately

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

    Amazing! thanks Jammed👌

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

    Hi did Figma changed something? Because I've tried it step by step but it doesn't work my text fades out but doesn't move 😕

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

      I had the same issue. The thing I was doing wrong was moving the text in the variant instead of the frame containing the text. That solved it for me

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

      Try checking if your animation style is set to "Smart Animate," and if that doesn't fix it, the answer above might do.

    • @gwsxoxo
      @gwsxoxo 4 місяці тому +1

      @@PuruThakkar thank you

  • @shripalmehta
    @shripalmehta 7 місяців тому

    Loved your tutorial!

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

    Thank you so much for this tutorial its very detailed, easy to understand appreciate this !!

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

    Thank you so much!! The best tutorial :)

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

    Works perfectly. Thanks!!

  • @MilenaGraphicDesign
    @MilenaGraphicDesign 9 днів тому

    Really awesome thanks! How do I make it even slower though? I tried to exceed the 10,000ms you recommended, and it looks like it's capped at 10k? Or am I doing something wrong?

    • @jammedstudio
      @jammedstudio  8 днів тому

      It is capped at 10,000ms. To make it slower, you will have to create a multi-step marquee component.

  • @chidindufaith7166
    @chidindufaith7166 9 місяців тому

    Very easy! Thank you❤❤

  • @alessiosurace6052
    @alessiosurace6052 Рік тому +11

    Hi, unfortunately I can't get it to work. I tried to set everything exactly like in the video, but nothing.

    • @maryamashraf3033
      @maryamashraf3033 10 місяців тому

      same happening with me

    • @MohanaKumar-xy5xm
      @MohanaKumar-xy5xm 9 місяців тому

      Check the name once again. Move the content with holding shift and mouse keys to keep it inside the frame else it will run out and the smart animated won't work.

    • @wthisthishandlething
      @wthisthishandlething 2 місяці тому

      ​​@maryamashraf3033 sorry for 7 months late, I fixed the problem by copying and pasting *Variant 2* instead of 1 to use, that is the mistake in the vid I think

    • @dhanushrijayakumar4177
      @dhanushrijayakumar4177 Місяць тому

      @@MohanaKumar-xy5xm at 1;11 how it became 3

  • @AbdulHanan-hj3rr
    @AbdulHanan-hj3rr Рік тому +1

    Great one !!

  • @FavourStephen-x2x
    @FavourStephen-x2x Рік тому

    this was simple and helpful. thank yoou

  • @ame6863
    @ame6863 22 дні тому

    hi, i'm back with a question: my marquee text pauses when i hover over a component that i've set to open overlay for a frame underneath the text. why is this? i can't figure it out :(

  • @IrynaAdamova-p3d
    @IrynaAdamova-p3d Рік тому

    Thanks so much! It was very helpful!

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

    Thank you so much for this! ♥

  • @spongmybob
    @spongmybob 6 місяців тому

    AWESOOME THANK YOU SO MUUUCH

  • @abigaelanyanwu9845
    @abigaelanyanwu9845 10 місяців тому

    This is really helpful.. thank you

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

    Wonderful and very helpful!

  • @lori6931
    @lori6931 13 днів тому

    is it possible to export the scrolling text animation in order to use it for a video?

  • @shripalmehta
    @shripalmehta 7 місяців тому

    Is it possible to stop the scrolling on mouse hover and resume when on mouse leave, in Figma Prototyping? you may use variables and modes, if required.

  • @AdrianA-gm3bi
    @AdrianA-gm3bi 11 місяців тому

    Thanks man)
    you are the best

  • @MarijaBezanoska
    @MarijaBezanoska 7 місяців тому

    You da best! Thanks a bunch!

  • @herastudio543
    @herastudio543 4 дні тому

    Hello, I've followed all the steps, however after I copy paste variant 1 before clicking preview, the scroll doesn't work :? not sure what's going wrong here

    • @jammedstudio
      @jammedstudio  4 дні тому

      @@herastudio543 The scrolling text only shows in the prototype after clicking preview if I understood your question correctly. Let me know if that helped.

    • @herastudio543
      @herastudio543 3 дні тому

      @@jammedstudio Hello again, unfortunately it's not working for me. I clicked prototype after clicking preview, but it's not showing the text scrolling. I've repeated the steps several times, so not sure where this is not going right for me.

    • @jammedstudio
      @jammedstudio  3 дні тому +1

      @@herastudio543 It’s a bit tricky to pinpoint the exact issue without seeing it, as with Figma, it could be due to several factors-layer naming, moving elements, prototyping settings, etc. Here’s a quick rundown of things to check:
      - Ensure all layers in both variants are named and structured the same, so Figma recognizes them as linked.
      - Confirm that you're moving the frame inside the component, not the component itself.
      - Double-check your prototyping settings-it should be set to Smart animate, not dissolve or other transitions.
      Hope this helps!

    • @herastudio543
      @herastudio543 3 дні тому

      @ thanks appreciate your help. will check all of it - have also reached out to figma if it’s an app issue

  • @arthurfigueredo7171
    @arthurfigueredo7171 Місяць тому

    the interaction details tab in my figma doesn't look like yours, did the interface change or is it just a premium feature?

    • @jammedstudio
      @jammedstudio  Місяць тому +1

      @@arthurfigueredo7171 This video was a while ago. Figma's interface has changed in the way it looks but the core things are still the same, just positioned a little differently.

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

    my component was working and then it stopped, any advice? ive been trying to recreate it following the exact same thing i did before with no luck

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

    Thank you, useful! Just what i need.

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

    Thanks so muchhh!!

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

    Hi, great tutorial thank you!
    I have one question... I'm using this to insert around 17 different logos, so I have duplicated them linearly to be able to create the animation. Only thing is that with 10,000 ms the animation is super fast and then slows down.
    Is there any way to solve this? Thank you!

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

      Thank you! Yes, you could have the animation slightly slower by adding more 10000ms steps inbetween each animation. So, instead of having a 1 step 10000ms, divide the animation into 4 variants or more to have it look slower at 40000ms. It will need some maths to have it look perfect though. Good luck!

  • @therealyayo1437
    @therealyayo1437 9 місяців тому +2

    i did exactly as you told and it's not working...

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

    Thank you for the tutorial! Is it possible to make the marquee text in a slope? I tried and it is not working, the texts are flashing up and down.

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

    Fantastic!

  • @nothing-fl5nw
    @nothing-fl5nw Місяць тому

    Thanks man

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

    Hi, thanks for your valuable training. In endless auto scrolling, I want to do this action: when take the mouse on the endless auto scrolling, it be stop? Can one help me to do it?

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

      Hey! Thanks for your feedback. I know the effect you're trying to achieve, however, I think it's not possible to achieve through pure figma prototyping.
      You can do it in a slightly hacky way though by making a third state that's not connected to either, and connect the other 2 states to it with the "while hovering" selected.
      Another way is to simply import an autoplaying video that's constantly scrolling, and create an interaction to pause on hover. That would look better in prototype.
      Hope this helps!

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

    Is there way to slow down the Marque text even more? I have my linear smart animate time set to 10000ms as shown in the video, but when I look at the prototype its going way too fast.

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

      I think in figma, the slowest animation is 10000ms. However, you can try to slow it down by reducing the overall length of your line. Hope this helps. :)

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

      @@jammedstudio Thanks for the advice, I'll give it a try

  • @kevinjohnnuluddin7069
    @kevinjohnnuluddin7069 6 місяців тому +1

    how do we copy the variant?

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

    Note: IF NOT WORKING
    sol: move one frame of the component to the left and 2nd one to the right. So from where the one frane will stop working the other will start working and this is how you going to achieve the marque effect

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

      You have to make the component very carefully (I'm attaching the link from where i got the solution)

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

      ua-cam.com/video/bMCI7dZQMxM/v-deo.htmlsi=GTxlHvz4cH0nlF5i

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

    Thank you!

  • @mauromaciel4871
    @mauromaciel4871 2 місяці тому

    Thanks !!

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

    Hi thanks for the cool video! I was having difficulty with this exercise, I noticed a few items from my visual that don't match your output.
    1. I cannot move a frame within a variant like you did. Checked the Figma document and it mentions that a frame cannot be moved independently within a variant.
    2. when I added the interaction, my arrow connector was pointing all the way on the right side of the variant. Yours are connected in the middle of the component. Unsure if that is a deal breaker, but I find that odd.
    3. I tried everything you demoed, all I see is a very small animation that is trying to complete the text string. There is no looping occurring. :(
    Hope you can provide some pointer. Thanks a ton.

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

      Hey there! I'll try to provide help with each point individually:
      1. You should be able to move frames with ease within variants, it's the anatomy that matters when building animations in Figma. Just make sure that the frame that you would like to move (which contains all of the other elements) is placed inside another frame (which is just there to act as a wrapper that wraps around the elements that move). So the variant itself should be a simple frame that wraps around another frame within that should be animated.
      2. I don't think it matters where the arrow is coming out or going into, as long as the interaction is set to "Change to." Figma has been releasing a lot of updates recently and it might look a little different from the video.
      3. For the looping, you will need to reconnect from the last variant to the first variant again. Sometimes you might need to restart the prototype for it to work.
      Hope this was helpful! Good luck

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

      @@jammedstudio Thank you so much! It worked! The first item was the main reason I couldn't make it work. I missed one frame!

  • @francoisvalsemey1963
    @francoisvalsemey1963 6 місяців тому

    Great ! But... On my figma it works in preview mode but it does not work in present mode (?). Strange...

    • @jammedstudio
      @jammedstudio  6 місяців тому

      If u restart the presentation, it should work perfectly 👌 thanks for your comment!

  • @nattivo6386
    @nattivo6386 10 місяців тому +1

    For some reason, it does not work anymore. I've followed it entirely

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

    work once than stop moving any idea ?

  • @kartikkalbande5938
    @kartikkalbande5938 6 місяців тому

    Heyy the animation works really well but in my case the text is duplicated in the background and its opacity is increasing from 1 to 100 in 10000ms

    • @kartikkalbande5938
      @kartikkalbande5938 6 місяців тому

      nevermind i had duplicated it and its opacity had somehow turned to 0 and then it had been animated XD

    • @jammedstudio
      @jammedstudio  6 місяців тому

      @kartikkalbande5938 Haha, I love how you just replied to yourself. Thanks for commenting! 😃

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

    Awesome thanks alot!

  • @ClashWithSP01
    @ClashWithSP01 11 місяців тому

    Can we reverse the flow like currently the texts are moving from right to left of the screen. Is there a way to make them move from left to right?

    • @jammedstudio
      @jammedstudio  11 місяців тому +1

      Yes definitely! Just reverse the order of the prototype from bottom to top and it should work seamlessly.

    • @ClashWithSP01
      @ClashWithSP01 11 місяців тому +1

      @@jammedstudio thank you it worked

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

    Once I change the Interaction details to after delay instead of click, the animation section disappears and I can't select the linear and smart animation. Any idea what's causing this?

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

    Thank you so much!!

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

    hi, lovely tutorial! i tried it and it works but my only concern is that theres a tiny pause (im guessing 1ms) in the animation when the scroll in the second variant is about to switch to the first variant. this does not make it smooth and seamless like yours. is there anything i can do to fix this?

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

      Thanks for reaching out! I think this is just as good as it gets in Figma prototyping.😅 At the end of the day, it's just a prototyping tool that is used to test or show a concept to others, so I wouldn't worry much about the 1ms delay.
      However, one thing you could do is recheck the start and end positions and make sure they are lining up properly and that the 2nd animation is set to after delay 1ms with "Instant" instead of smart animate.
      I'm glad you found the video helpful! Cheers.

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

    for some reason the Fixed position is not working with this method. I need the marquee fixed on top of the screen, but it moves with the scroll although I placed it into the Fixed area :(

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

      To have it fixed in a specific position, you will have to put the marquee component inside another fixed frame, not the marquee itself. Maybe try putting the component in a new auto-layout, fix its position, and refresh your prototype view a few times. I've tried it and it works fine as it seems for me. Hope this helps.

  • @darshanjoshi9312
    @darshanjoshi9312 22 дні тому

    its working but i don't know why its blurry while moving ?

    • @jammedstudio
      @jammedstudio  22 дні тому

      @@darshanjoshi9312 This usually happens when you already have the prototype open and paste a new component in. Possibly try reopening the prototype, or check if everything is named properly in the layers so that they're linked when animating.

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

    Thank you! :)

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

    How to export it to gif?? I couldn't export it

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

    Hey mine is working in one frame but on other frame it is stopping in middle is this figma problem?

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

      Hello, I think sometimes you just need to restart the prototype (close and reopen) in order for it to work properly on all screens. Hope this helps you out.

  • @woolof9744
    @woolof9744 16 днів тому

    not working.

  • @andrefudge9919
    @andrefudge9919 9 місяців тому

    CAN THIS ONLY BE DONE TO THE LEFT AND RIGHT?

    • @jammedstudio
      @jammedstudio  9 місяців тому

      Any direction works, as long as the motion is linear and could be repeated in sequence.

  • @sophie-you
    @sophie-you Рік тому

    Thank you

  • @LucasOliveira-nc8iz
    @LucasOliveira-nc8iz 2 місяці тому

    thanks

  • @KhairulIslam-b7b
    @KhairulIslam-b7b Рік тому

    Is there any way to make the transition more slower, 10000ms is still very fast for me. 😐

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

      Fortunately, yes. You could make more steps mid transition. So instead of having 1 step as shown in the video, you could have 4 x 10000ms, which makes 40 second speed. Try it out and let me know if it works!

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

      @@jammedstudio, I'd love to see your do a video on this. I need a slower transition too but can't figure out how to do this. Thanks.

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

    I try same as you and not working but when i do on click its work .. only after delay not working

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

      I think in these instances, you might want to close and reopen the prototype for the animation to take effect. Let me know if that helps!

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

    how can you export the scrolling animation into a gif?

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

      I don't think this is a built-in feature in Figma. However, you might want to look at plugins that do it for you.

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

    is it possible to reverse the rotations?

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

      Yep, should be easy to do. Just reverse the order of the prototype and it should work as expected.

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

    I'm not able to Move text pls help

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

    Yes it's quick and simple step by step nothing happens I give up! 🙄

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

      I'm sorry that you're facing difficulties following the video. It's a more complex animation style, so I would understand why it might be a little difficult. If you're just starting with animation in UI, this video might not be best suited for you.
      Please let me know which step you find yourself getting stuck at so that I can assist you perhaps. Otherwise, try to make sure that the group of elements that you're trying to move is the group within the component frame and not the component itself. Double-click or check from the layers panel to make sure you're moving the right frame. Thank you.

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

      @@jammedstudio Hi thank's for getting back to me it's not complex my text isn't moving but thank's for your advice I appreciate it 👍

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

      @@j4ckfl4ash33 Ok this problem could be fixed either by extending the amount of repeated text within the frame, or by making sure that you're selecting the elements within the frame and not the component itself. Hope this helps.

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

      @@jammedstudio Figured it out!! 😅 Finally so A question why is it stops then restarts after the last text ?

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

      @J4ck Fl4ash It's to keep the whole thing looping and give the infinite loop feel.

  • @abdulmunim8794
    @abdulmunim8794 Місяць тому +1

    how to export frame such that the animation shows?

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

    Tried it with pictures didn’t work 😢

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

      Make sure that you're using smart animate and that your layers are named the same between the variants to ensure that the animation works properly. Let me know if that helps. :)

  • @dhanushrijayakumar4177
    @dhanushrijayakumar4177 Місяць тому

    how 3 designcoolprototype came 1:11

  • @shahbazhussain6730
    @shahbazhussain6730 11 місяців тому

    Yes it not happening I tried it exactly

  • @AditiGupta-h1d
    @AditiGupta-h1d 11 місяців тому

    No, It's not working.

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

    The video is too fast😂

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

      Try slowing it down :D

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

      @@jammedstudio 😂

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

      But Jamm
      Can you solve this for me
      What do I do
      Other INTERACTIONS aside "change to" are not working in my figma
      Can use, overlay...and the likes

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

      @@hankerboot571 That is because for components you can only change from one component state to another, however, if you try prototyping something outside the component set, it should have all of the properties available. Hope this was helpful. :)

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

      @@jammedstudio I will try look into it again... thanks much

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

    So fast its impossible to learn

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

    200IQ Animate Lol..

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

    АТДУШИ

  • @patu8481
    @patu8481 Місяць тому

    Thanks!

  • @FrickingTaylor
    @FrickingTaylor 7 місяців тому

    Thanks so much!

  • @thapelommakola8208
    @thapelommakola8208 2 місяці тому

    Thank you