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
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
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.
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.
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?
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.
@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
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 :(
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.
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
@@herastudio543 The scrolling text only shows in the prototype after clicking preview if I understood your question correctly. Let me know if that helped.
@@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.
@@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!
@@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.
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!
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!
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?
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!
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.
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. :)
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
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.
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
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?
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?
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.
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 :(
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 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.
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.
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!
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 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.
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. :)
@@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. :)
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
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 ?
@KeezyPm Helloo, sure thing.
You may reach me out by mail on my about page. 👌
@@jammedstudio Okay , I sent you a private message on your Behance account sir ...I can't find a mail link on your bio
This is the third video I've watched on how to get the scrolling text effect in figma. By far the best explained.
Quick and simple, here's a man who knows his stuff. Thank you for this super quick and easy tutorial Mr Jammed.
Thank you, Mr Lawless.
Straight to the point no gibberish Thanks man.
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
I could not figure out why the animation wasn't working...had to refresh - thanks so much!!
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.
Thank you so much !! I've been trying to understand variables for a while now, much clear clear now !
You're amazing! Thank you for the simple, straight to the point tutorial. It helped so much.
It works and I’m so shocked. Thank you so much. May you be rewarded abundantly ❤️
Thank you! Glad it worked. :)
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.
Don't work...
You're a genius bro!! You've helped me to solve one problem that I've been having hahaha. Thank u so much.
@@melaniedesigner Welcome! Good luck 🤞
Thanks! I've been looking for this for a long time!
Welcome!
That’s the best video i have seen on this! it was so easy 🙏🏻
Excelent tutorial! Quick and simple. i didn't know it was possible to do that in figma. Thanks!
thank you so much for this, i am definitely subscribing immediately
Thanks bud!
Amazing! thanks Jammed👌
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 😕
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
Try checking if your animation style is set to "Smart Animate," and if that doesn't fix it, the answer above might do.
@@PuruThakkar thank you
Loved your tutorial!
Thank you so much for this tutorial its very detailed, easy to understand appreciate this !!
Thank you so much!! The best tutorial :)
Works perfectly. Thanks!!
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?
It is capped at 10,000ms. To make it slower, you will have to create a multi-step marquee component.
Very easy! Thank you❤❤
Hi, unfortunately I can't get it to work. I tried to set everything exactly like in the video, but nothing.
same happening with me
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.
@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
@@MohanaKumar-xy5xm at 1;11 how it became 3
Great one !!
this was simple and helpful. thank yoou
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 :(
Thanks so much! It was very helpful!
Thank you so much for this! ♥
AWESOOME THANK YOU SO MUUUCH
This is really helpful.. thank you
Wonderful and very helpful!
Thanks! Glad you found it helpful.
is it possible to export the scrolling text animation in order to use it for a video?
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.
Thanks man)
you are the best
You da best! Thanks a bunch!
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
@@herastudio543 The scrolling text only shows in the prototype after clicking preview if I understood your question correctly. Let me know if that helped.
@@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.
@@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!
@ thanks appreciate your help. will check all of it - have also reached out to figma if it’s an app issue
the interaction details tab in my figma doesn't look like yours, did the interface change or is it just a premium feature?
@@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.
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
Same here
Thank you, useful! Just what i need.
Thanks so muchhh!!
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!
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!
i did exactly as you told and it's not working...
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.
Fantastic!
Thanks man
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?
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!
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.
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. :)
@@jammedstudio Thanks for the advice, I'll give it a try
how do we copy the variant?
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
You have to make the component very carefully (I'm attaching the link from where i got the solution)
ua-cam.com/video/bMCI7dZQMxM/v-deo.htmlsi=GTxlHvz4cH0nlF5i
Thank you!
Thanks !!
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.
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
@@jammedstudio Thank you so much! It worked! The first item was the main reason I couldn't make it work. I missed one frame!
Great ! But... On my figma it works in preview mode but it does not work in present mode (?). Strange...
If u restart the presentation, it should work perfectly 👌 thanks for your comment!
For some reason, it does not work anymore. I've followed it entirely
work once than stop moving any idea ?
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
nevermind i had duplicated it and its opacity had somehow turned to 0 and then it had been animated XD
@kartikkalbande5938 Haha, I love how you just replied to yourself. Thanks for commenting! 😃
Awesome thanks alot!
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?
Yes definitely! Just reverse the order of the prototype from bottom to top and it should work seamlessly.
@@jammedstudio thank you it worked
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?
Thank you so much!!
Welcome so much!! :D
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?
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.
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 :(
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.
its working but i don't know why its blurry while moving ?
@@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.
Thank you! :)
How to export it to gif?? I couldn't export it
Hey mine is working in one frame but on other frame it is stopping in middle is this figma problem?
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.
not working.
CAN THIS ONLY BE DONE TO THE LEFT AND RIGHT?
Any direction works, as long as the motion is linear and could be repeated in sequence.
Thank you
Welcome!
thanks
Is there any way to make the transition more slower, 10000ms is still very fast for me. 😐
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!
@@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.
I try same as you and not working but when i do on click its work .. only after delay not working
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!
how can you export the scrolling animation into a gif?
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.
is it possible to reverse the rotations?
Yep, should be easy to do. Just reverse the order of the prototype and it should work as expected.
I'm not able to Move text pls help
Yes it's quick and simple step by step nothing happens I give up! 🙄
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.
@@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 👍
@@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.
@@jammedstudio Figured it out!! 😅 Finally so A question why is it stops then restarts after the last text ?
@J4ck Fl4ash It's to keep the whole thing looping and give the infinite loop feel.
how to export frame such that the animation shows?
Tried it with pictures didn’t work 😢
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. :)
how 3 designcoolprototype came 1:11
Yes it not happening I tried it exactly
No, It's not working.
The video is too fast😂
Try slowing it down :D
@@jammedstudio 😂
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
@@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. :)
@@jammedstudio I will try look into it again... thanks much
So fast its impossible to learn
200IQ Animate Lol..
АТДУШИ
Thanks!
Thanks so much!
Welcome!
Thank you