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.
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?
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
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.
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.
@@echoactual1776 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: ruclips.net/video/Zf2ZgKcoC5w/видео.htmlsi=EtQAz6iqYVRw18Rf
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.
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.
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 ....😭😭
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!
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 :)
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 ✌️
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 :)
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.
Thanks so much for this, straight to the point.
thanks a bunch! :)
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?
Thanks for this. Your file has the bad example though, not the working one :D
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 :)
Perfect, you only just posted and I needed this! Subbed.
I am glad that I could help :)
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.
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.
@@echoactual1776 exactly! the transition property on a variant controls how that specific variant appears if any interaction goes to it.
@@echoactual1776 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.
Thank you, was looking for this!
Started following your channel 👌#
Thansk a lot :)
i cannot find appear on interation when I connect variant 1 to variant 2
Thank you, Mate - how to do with text align text
how do i add more than 3 words for the cycle?
Thanks mate
Happy to help 🫶
will it work if instead of text I want images to cycle?
Yes! Same structure!
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: ruclips.net/video/Zf2ZgKcoC5w/видео.htmlsi=EtQAz6iqYVRw18Rf
how do you do an animation with images from figma? it like 5 layers of dots that move
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
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.
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. :)
Well-done, thanks
Thanks for watching!
Very helpful, thank you
You're welcome!
Just as awesome as always
Thank you! Cheers!
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.
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?
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.
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.
During text loop cycle my text are not changing in set variable ?
Send a remix in twitter dms
Can all Figma animations be recreated in framer? Asking for a friend :)
99% yes. 🪄
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.
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.
Text animation was not working properly for the phone
Why?
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 🏆🏆🏆
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.
i dosnt work...
Do you have some more details about what you’re struggling with?
My texting going zig zag while changing, I don't know what to do
Ah the mistakes I made with mine. From now on, it will be one tutorial a week (2 if i can)
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 :)