Perfect, you only just posted and I needed this! Subbed.

@framer.university

7 ай бұрын

I am glad that I could help :)

I’ve been searching this tutorial for a long time! Thank you! Ended up using slideshow for this kinda effects lol.

@framer.university

7 ай бұрын

That’s a great solution as well! I am glad this tutorial helped you :)

Thanks so much for this, straight to the point.

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.

@framer.university

7 ай бұрын

My pleasure! Content on the CMS is coming too :)

Thank you, was looking for this! Started following your channel 👌#

@framer.university

6 ай бұрын

Thansk a lot :)

Just as awesome as always

@framer.university

7 ай бұрын

Thank you! Cheers!

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

@framer.university

7 ай бұрын

Thanks for the kind words. More to come :)

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 😭😭😭😭😭😭😭

@framer.university

7 ай бұрын

Haha maan! I hope this helped 🫶

Well-done, thanks

@framer.university

7 ай бұрын

Appreciate it :)

Very helpful, thank you

@framer.university

4 ай бұрын

You're welcome!

Thanks mate

@framer.university

Ай бұрын

Happy to help 🫶

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.

@framer.university

7 ай бұрын

That’s a smart solution man! Congrats ✌️

how do you do an animation with images from figma? it like 5 layers of dots that move

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? :/

@framer.university

4 ай бұрын

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.

Thank you, Mate - how to do with text align text

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?

Hey mate! Can i get the code in React?

Are you able to assign a scroll behavior to trigger these animations similar to how apple does on their website?

@framer.university

5 ай бұрын

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: kzread.info/dash/bejne/jJpmvMmEk9KpZdo.htmlsi=EtQAz6iqYVRw18Rf

During text loop cycle my text are not changing in set variable ?

@framer.university

6 ай бұрын

Send a remix in twitter dms

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?

@framer.university

4 ай бұрын

Remix please.

@echoactual1776

3 ай бұрын

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.

@framer.university

3 ай бұрын

@@echoactual1776 exactly! the transition property on a variant controls how that specific variant appears if any interaction goes to it.

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.

@framer.university

5 ай бұрын

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!

@framer.university

3 ай бұрын

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?

@framer.university

5 ай бұрын

Yeah. Overflow hidden would give a different feel for the animation. You can do either. :)

will it work if instead of text I want images to cycle?

@framer.university

Ай бұрын

Yes! Same structure!

does framer have this where you enable it with 1 click instead of recreating it from scratch? that would be more useful.

@framer.university

7 ай бұрын

What do you mean? You can click the link in description and remix the file or copy the component made in the tutorial.

@ChronicleContent

7 ай бұрын

@@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?

@framer.university

3 ай бұрын

Did you copy my comp or made it from scratch?

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?

@Mendaciloquence

6 ай бұрын

nvm fixed, Thanks for your incredible walk through!

@mauricioromiti

6 ай бұрын

what was it? i can only use appear on the 1st variant...@@Mendaciloquence

@mimansasharma7323

6 ай бұрын

same with me! @@mauricioromiti

@framer.university

5 ай бұрын

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.

5:42 i am trying to make this but i don't have the "Appear" option 😢

@framer.university

3 ай бұрын

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.

Can all Figma animations be recreated in framer? Asking for a friend :)

@framer.university

7 ай бұрын

99% yes. 🪄

So how to create typing effect?

@framer.university

3 ай бұрын

typewriter.framer.wiki/

Text animation was not working properly for the phone

@framer.university

6 ай бұрын

Why?

What is "Words bad" in your case and how to add or create it?

@framer.university

4 ай бұрын

what do you mean?

@dev.anshuu

4 ай бұрын

@@framer.university that another layer named as words bad

Why l don’t have apper effect?

@framer.university

7 ай бұрын

hmm, interesting. You should have it. You did everything as I showed in the video? :)

@Mendaciloquence

6 ай бұрын

Hey I just had the same problem, its because you're selecting the text and not the variant box

@BETO526

5 ай бұрын

mandou muito no detalhe@@Mendaciloquence

@marsdraws888

2 ай бұрын

​@@Mendaciloquence honestly thank u so much lol 🏆🏆🏆

My texting going zig zag while changing, I don't know what to do

i dosnt work...

@framer.university

Ай бұрын

Do you have some more details about what you’re struggling with?

Amazing content. But in the end it is not exactly the same effect, maybe you forgot to put overflow hidden

@framer.university

7 ай бұрын

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.

cant do it... too hard

@framer.university

4 ай бұрын

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 ....😭😭

@framer.university

2 ай бұрын

Make sure to connect the interaction from the variant itself and not from a layer within.

@crusaderhistory

2 ай бұрын

@@framer.university Aaahhhhh poor me....! Thank's, Sorry to westing your time it's work now. Thanks a lots....

Well-done, thanks

@framer.university

7 ай бұрын

Thanks for watching!