I just tried it for 6 hours to make this effect but i can't 😢 and just need less than 5 minutes to scroll youtube and realized that you have upload the tutorial video 😭😭😭😭😭😭😭
This is great! I have done a similar effect using the slideshow component and adjusting settings to vertical movement. Seems a bit easier to update or add items that way, but maybe it has drawbacks I’m not aware of.
Nandy you are a machine ! i love your video tutorial ! i wainting for your futur course. I Hope to see more value and make us better on framer and create pattern to build easily our project with framer
My transition works correctly but the starting point for all of the different words keeps jumping left and right so it's giving more of a jittery effect rather than a smooth scroll. Any ideas?
Ran into this problem as well, I’ve got a couple solutions: 1. Back in your main workspace (out of the component) you can set the component to absolute position and set a value from the left, so the left side of the component will always be aligned. This doesn’t work for my case because my cycle text is on its own line, so it needs to be centered, rather than aligned left. 2. In the component, rather than aligning all of your absolute position text to the left like in the tutorial, it all needs to be centered with each other. You can do this in the position panel by making the left and right values equal to each other (side note, because you’re setting custom position, you want to make sure the text is how you want it, because if you change it, you’ll have to update the position to get it centered again)
Great tutorial thank you! I dit this a few months ago and it worked perfectly. I'm coming back to edit my site now after a few busy months and the animations works, BUT the words that come after one other jitter and glitch after they should've disappeared. Any idea how to fix this? I can give more information ofcours.
when i connect the last one to the 1st, the transition of the 3rd to the 4th becomes instant and from the 4th to the 1st becomes spring (even tough on the pannel it looks correct)
hmm. idk what is the issue exactly, but make sure to keep in mind that the transition setting that you adjust on each variant controls how the element will animate TO that variant and NOT FROM that variant. so setting the 1st variant to instant will make it transition TO the 1st one instantly. also keep in mind that as soon as you adjust the 1st (primary) variant's transition, all other variant's transitions will adjust too (if they haven't been overridden already) since all things you do on the primary variant will be applied to all other variants. so just double check all variant's transitions and make sure they're all correct and haven't been set to a different transition as a result of adjusting the primary. hope this helps! :)
So I am trying to have the text to the left adjust to center, but the transition is instant and there doesnt seem to be any option to effect this. In Figma if I use smart animate, the text adjust with a natural slide, but that doesnt seem possible here.
How do I make the text scale to my scene properly? I also have another none moving word next to it Im having trouble making my type scale. I have my hierarchy like this Varient>Vertical Stack>Seperate non moving type, Horizontal Stack> All the cycling text Ive tried fit to content, relative applied to different parts of my hierarchy. None worked. Ive also tried fit in the type size, but that breaks my cycle because all the type is trying to fit to one "true size"
Hi i'm very stuck between 2:00 and 2:25. my word is UX DESIGNER and i'm able to turn it into a stack by clicking "layout" but when I put the width and height into "fit content", the whole word goes vertical and I dont know how to fix it, can you help? thank you!
Great tutorial! I have come back to this one and the original video a couple of times now. However when I try to recreate this on my new project, the moment I change the second, third, fourth words opacity to zero the animation breaks and shows nothing but the first word. Even when I go to each variant and change the opacity back to 1. Any tips on this?
I set up everything exactly like you did but for some reason it jumps from v3 to v4 with instant movement while it's definitely set as spring. Then it does the reset like you showed when you only have 3 variants. Starting to think animating in Framer is super buggy. Edit: i just used the new component you released, so i'm good for now :p
Hey, I am experiencing the same problem right now... got a set up with the last extra text title layer as the first, and instant transition on the last layer to the first... started to think it's somehow Framer bugging... since it resets the wrong way round still. What component were you referring to?
Hello, how would I make sure that it works if the text goes on multiple lines? The "Words" component gets out of place when the static text goes to two lines.
on my last variant, when I add an interaction back to variant 1, the instant transition doesn't work for some reason. When I play it back it snaps from Variant 10 to Variant 11(last) instantly even though that is not the assigned function. is this some sort of bug?
I was running into the same issue until I realized this: when you're setting the transition on variant 1, you're really setting the transition from 11 to 1. And when you're setting the transition on variant 11, you're actually changing the way it transitions from 10 to 11. So, think of it this way: if you change the transition property on a variant, it affects how this variant appears, not the next one.
@@k9prtr Goddamn! I was breaking my head against the wall tryna figure out why the animation was fucking up at the last transition and the loop transition. Coming from being an avid user of Figma, this seems counter- intuitive. Now I understand why Transition is under Styles and not under Interactions.
Of course! If you select the component, you can add effects to it on the right panel. You need to choose “scroll variants”. Great example is this video: th-cam.com/video/Zf2ZgKcoC5w/w-d-xo.htmlsi=EtQAz6iqYVRw18Rf
Thanks for sharing this! One thing I am facing is that when I remix the project and play it in Framer, the behaviour is different than that on the demo link. In framer it is showing the scrolling back down to the first one, as opposed to the smooth transition you made by duplicating the first word. Did anyone face this issue? Thanks in advance!
Sometimes components break in the remix unfortunately. (For example the text layers within the component get an appear effect, you can try removing that) You might wanna recreate it from scratch based on the tutorial, and so you practice as well.
I used your component for this (copied from your Framer University) but it won't let me change the font. When I double click on the component it says "this component is linked to a primary component in another project". If I click unlink / unlink and replace all, it changes the font to a tiny black font.
Unlink. Select all text layers within primary variant. Reassign variables on the right panel. Remove appear effect from the right panel if the text layers have it. While still all text layers selected, change font on right panel. Now if you go back to the main canvas, you should be able to change the color and size of the font too.
Hi for the variant one to variant two Connection interaction, the only options are: Tap On Tap Mouse Enter Mouse leave Any idea why I cant see the on appear option?
Make sure to select the variant itself when connecting the interaction to the new variant. If you select a layer within, and connect from there, appear will not be an option.
@@framer.university Took me hours but yes eventually haha. But ended up using the typewriter component instead 🤣 Thanks, I am learning a lot from your videos and resources.
Make sure to select the whole variant and connect the interaction from it. When you try connecting the interaction from a layer within, you don’t have the appear option.
Thanks! Yes it is up to your personal preference. You can use it with overflow hidden or visible. It's just a slight change since we're hiding inactive words.
I Follow step by step carefully Until My FRAMER ONLY HAVE 3 INTERACTION: 1. STAR 2.ENTER 3 LEAVE Appear missing in interaction, why it's missing? And than stack over there, can You Help me. or somebody Help me ....😭😭
I just tried it for 6 hours to make this effect but i can't 😢 and just need less than 5 minutes to scroll youtube and realized that you have upload the tutorial video 😭😭😭😭😭😭😭
Haha maan! I hope this helped 🫶
thank you so much my boy for all you share with us for free.
I'd love to see you make a video showing us how to use a CMS in Framer.
My pleasure!
Content on the CMS is coming too :)
I’ve been searching this tutorial for a long time! Thank you!
Ended up using slideshow for this kinda effects lol.
That’s a great solution as well! I am glad this tutorial helped you :)
Thanks so much for your tutorials. I've been learning a lot because of them and now Framer is my tool to go for build websites!
thank you! so happy the tutorials are helping you! 🙌
Perfect, you only just posted and I needed this! Subbed.
I am glad that I could help :)
Thanks so much for this, straight to the point.
thanks a bunch! :)
This is great! I have done a similar effect using the slideshow component and adjusting settings to vertical movement. Seems a bit easier to update or add items that way, but maybe it has drawbacks I’m not aware of.
That’s a smart solution man! Congrats ✌️
Thank your for the great tutorial!
Maybe someone can help: when i connect the variants there is no 'appear' option, is this a bug? or new update? :/
You need to connect the whole variant to another variant. If you’re trying to only connect the inner text layer, it won’t work.
Nandy you are a machine ! i love your video tutorial ! i wainting for your futur course. I Hope to see more value and make us better on framer and create pattern to build easily our project with framer
Thanks for the kind words. More to come :)
Thank you, was looking for this!
Started following your channel 👌#
Thansk a lot :)
Just as awesome as always
Thank you! Cheers!
My transition works correctly but the starting point for all of the different words keeps jumping left and right so it's giving more of a jittery effect rather than a smooth scroll. Any ideas?
Ran into this problem as well, I’ve got a couple solutions:
1. Back in your main workspace (out of the component) you can set the component to absolute position and set a value from the left, so the left side of the component will always be aligned. This doesn’t work for my case because my cycle text is on its own line, so it needs to be centered, rather than aligned left.
2. In the component, rather than aligning all of your absolute position text to the left like in the tutorial, it all needs to be centered with each other. You can do this in the position panel by making the left and right values equal to each other (side note, because you’re setting custom position, you want to make sure the text is how you want it, because if you change it, you’ll have to update the position to get it centered again)
Great tutorial thank you! I dit this a few months ago and it worked perfectly. I'm coming back to edit my site now after a few busy months and the animations works, BUT the words that come after one other jitter and glitch after they should've disappeared. Any idea how to fix this? I can give more information ofcours.
when i connect the last one to the 1st, the transition of the 3rd to the 4th becomes instant and from the 4th to the 1st becomes spring (even tough on the pannel it looks correct)
hmm. idk what is the issue exactly, but make sure to keep in mind that the transition setting that you adjust on each variant controls how the element will animate TO that variant and NOT FROM that variant. so setting the 1st variant to instant will make it transition TO the 1st one instantly.
also keep in mind that as soon as you adjust the 1st (primary) variant's transition, all other variant's transitions will adjust too (if they haven't been overridden already) since all things you do on the primary variant will be applied to all other variants.
so just double check all variant's transitions and make sure they're all correct and haven't been set to a different transition as a result of adjusting the primary.
hope this helps! :)
Thanks for this. Your file has the bad example though, not the working one :D
So I am trying to have the text to the left adjust to center, but the transition is instant and there doesnt seem to be any option to effect this. In Figma if I use smart animate, the text adjust with a natural slide, but that doesnt seem possible here.
Thanks mate
Happy to help 🫶
How do I make the text scale to my scene properly? I also have another none moving word next to it Im having trouble making my type scale. I have my hierarchy like this
Varient>Vertical Stack>Seperate non moving type, Horizontal Stack> All the cycling text
Ive tried fit to content, relative applied to different parts of my hierarchy. None worked. Ive also tried fit in the type size, but that breaks my cycle because all the type is trying to fit to one "true size"
Hi i'm very stuck between 2:00 and 2:25. my word is UX DESIGNER and i'm able to turn it into a stack by clicking "layout" but when I put the width and height into "fit content", the whole word goes vertical and I dont know how to fix it, can you help? thank you!
Great tutorial! I have come back to this one and the original video a couple of times now. However when I try to recreate this on my new project, the moment I change the second, third, fourth words opacity to zero the animation breaks and shows nothing but the first word. Even when I go to each variant and change the opacity back to 1. Any tips on this?
Well-done, thanks
Thanks for watching!
I set up everything exactly like you did but for some reason it jumps from v3 to v4 with instant movement while it's definitely set as spring. Then it does the reset like you showed when you only have 3 variants. Starting to think animating in Framer is super buggy.
Edit: i just used the new component you released, so i'm good for now :p
Hey, I am experiencing the same problem right now... got a set up with the last extra text title layer as the first, and instant transition on the last layer to the first... started to think it's somehow Framer bugging... since it resets the wrong way round still. What component were you referring to?
Very helpful, thank you
You're welcome!
Hello, how would I make sure that it works if the text goes on multiple lines? The "Words" component gets out of place when the static text goes to two lines.
Thank you, Mate - how to do with text align text
on my last variant, when I add an interaction back to variant 1, the instant transition doesn't work for some reason. When I play it back it snaps from Variant 10 to Variant 11(last) instantly even though that is not the assigned function. is this some sort of bug?
Remix please.
I was running into the same issue until I realized this: when you're setting the transition on variant 1, you're really setting the transition from 11 to 1. And when you're setting the transition on variant 11, you're actually changing the way it transitions from 10 to 11. So, think of it this way: if you change the transition property on a variant, it affects how this variant appears, not the next one.
@@k9prtr exactly! the transition property on a variant controls how that specific variant appears if any interaction goes to it.
@@k9prtr Goddamn! I was breaking my head against the wall tryna figure out why the animation was fucking up at the last transition and the loop transition. Coming from being an avid user of Figma, this seems counter- intuitive. Now I understand why Transition is under Styles and not under Interactions.
i cannot find appear on interation when I connect variant 1 to variant 2
how do i add more than 3 words for the cycle?
Are you able to assign a scroll behavior to trigger these animations similar to how apple does on their website?
Of course! If you select the component, you can add effects to it on the right panel. You need to choose “scroll variants”.
Great example is this video: th-cam.com/video/Zf2ZgKcoC5w/w-d-xo.htmlsi=EtQAz6iqYVRw18Rf
Thanks for sharing this!
One thing I am facing is that when I remix the project and play it in Framer, the behaviour is different than that on the demo link. In framer it is showing the scrolling back down to the first one, as opposed to the smooth transition you made by duplicating the first word. Did anyone face this issue?
Thanks in advance!
Sometimes components break in the remix unfortunately. (For example the text layers within the component get an appear effect, you can try removing that)
You might wanna recreate it from scratch based on the tutorial, and so you practice as well.
Why not use overflow to hide instead of opacity ? For animation purposes?
Yeah. Overflow hidden would give a different feel for the animation. You can do either. :)
Was wondering this as well, but the way he did it provides a smooth fade in/out and looks a bit nicer than hiding overflow
I used your component for this (copied from your Framer University) but it won't let me change the font. When I double click on the component it says "this component is linked to a primary component in another project".
If I click unlink / unlink and replace all, it changes the font to a tiny black font.
Unlink.
Select all text layers within primary variant.
Reassign variables on the right panel.
Remove appear effect from the right panel if the text layers have it.
While still all text layers selected, change font on right panel.
Now if you go back to the main canvas, you should be able to change the color and size of the font too.
Hi
for the variant one to variant two Connection interaction, the only options are:
Tap
On Tap
Mouse Enter
Mouse leave
Any idea why I cant see the on appear option?
nvm fixed, Thanks for your incredible walk through!
what was it? i can only use appear on the 1st variant...@@Mendaciloquence
same with me!
@@mauricioromiti
Make sure to select the variant itself when connecting the interaction to the new variant.
If you select a layer within, and connect from there, appear will not be an option.
how to create type writer efeect in framer please make a video on it there is no video please nandi help me
Here 's a free component:
typewriter.framer.wiki
will it work if instead of text I want images to cycle?
Yes! Same structure!
how do you do an animation with images from figma? it like 5 layers of dots that move
does framer have this where you enable it with 1 click instead of recreating it from scratch? that would be more useful.
What do you mean? You can click the link in description and remix the file or copy the component made in the tutorial.
@@framer.university I mean framer to have this animation as default on existing templates.
This doesn't work anymore.
When Unlinking the component to edit the font, it breaks the whole thing.
Hmm that’s weird.
Were you able to recreate it following the tutorial?
@@framer.university Took me hours but yes eventually haha. But ended up using the typewriter component instead 🤣
Thanks, I am learning a lot from your videos and resources.
Can all Figma animations be recreated in framer? Asking for a friend :)
99% yes. 🪄
Hey mate!
Can i get the code in React?
You could get it in theory, but it doesn't work like a charm. Easier to just simply use Framer imo.
is any simple solution than this?
there isn't.
My text keeps cycling up at a random angle. When the old word flies away it leaves at random diagonal angles. Any idea?
Did you copy my comp or made it from scratch?
During text loop cycle my text are not changing in set variable ?
Send a remix in twitter dms
5:42 i am trying to make this but i don't have the "Appear" option 😢
Make sure to select the whole variant and connect the interaction from it.
When you try connecting the interaction from a layer within, you don’t have the appear option.
What is "Words bad" in your case and how to add or create it?
what do you mean?
@@framer.university that another layer named as words bad
So how to create typing effect?
typewriter.framer.wiki/
Why l don’t have apper effect?
hmm, interesting. You should have it. You did everything as I showed in the video? :)
Hey I just had the same problem, its because you're selecting the text and not the variant box
mandou muito no detalhe@@Mendaciloquence
@@Mendaciloquence honestly thank u so much lol 🏆🏆🏆
Text animation was not working properly for the phone
Why?
Amazing content. But in the end it is not exactly the same effect, maybe you forgot to put overflow hidden
Thanks!
Yes it is up to your personal preference. You can use it with overflow hidden or visible. It's just a slight change since we're hiding inactive words.
Ah the mistakes I made with mine. From now on, it will be one tutorial a week (2 if i can)
i dosnt work...
Do you have some more details about what you’re struggling with?
Guys DO NOT set the texts to alling left, allign them to the centre, it will save you a headache trust me
My texting going zig zag while changing, I don't know what to do
cant do it... too hard
then just remix the project and copy the comp over to your project :)
framer.university/resources/text-cycle-component
I Follow step by step carefully Until My FRAMER ONLY HAVE 3 INTERACTION:
1. STAR
2.ENTER
3 LEAVE
Appear missing in interaction, why it's missing?
And than stack over there, can You Help me. or somebody Help me ....😭😭
Make sure to connect the interaction from the variant itself and not from a layer within.
@@framer.university Aaahhhhh poor me....! Thank's, Sorry to westing your time it's work now. Thanks a lots....
Well-done, thanks
Appreciate it :)