This is the 2nd time I can't resist pausing the video in Framer University and jumping here to comment my gratitude for Nandi-this guy is A-M-A-Z-I-N-G. 100% feels like he's in the right corner in the universe-the perfect mentor for Framer, Man, the intros are always smooth yet 🔥
Without doubt the best nocode tutorials on the internet, across all platforms, not just Framer. Thanks very much for the clear, informative and creative content.
Thank you, Nandi, for how you conducted the event variables, which really inspired me to adapt the feature to create a slide menu. I had some troubles with overlay before I saw your video, Now, I know how to deal with the issue. I'm a big fan of Framer University, and from several of your first tutorials, I learned a lot from you. On again thank you a lot.
I've been trying to understand how to use event variables for so long and I believe this is the first tutorial I've come across that explains how to use them. I would really appreciate to see more examples of how we can use them. Thanks Nandi, you rock! 🙌🤘
Really like Framer's component facility, much easier to digest that Webflow's classes / combo classes which can get v.complex to manage over a project I imagine!
Nandi make a tutorial on that dynamic menu component in the beginning of the video!! thats something you should post on youtube cause explaining what components are, is explained by thousands of others framer experts.What you teach and explains in the tutorials of building complex components which can be helpful in websites makes us watch and wait for your new videos!!!!
Dope video pro. To go back to the ON state you can click at the top where it says interactions and change it from "Off" to "Cycle Variant" saves yu having to link back to it
Great Video. Please let me know if you can make a video on how to create a component toggle switch that will change on toggle and change for Desktop, tablet, and phone. I tried creating a custom contact card with Client or crew toggle and depending on which one there would be different questions. Had big issues when I created more than 4 variants and not sure what I did wrong
These are great tutorials... But one tutorial I haven't seen that would greatly help me and probably a few others. How to effectively navigate the support community and best practices to keep your sites up and running, because let's face facts. No matter how wiz-bang beautiful your site is, it's nothing if it's down because of some Framer bug. But please, carry on
Very well explained!! Thanks for making the video and sharing these gems with us! I'd love to know how to do the bento card animations :) like the ones that show the benefits/ features of a product Thanks!! Have a great day!!
Hey! Thanks for the kind words! For a bento anim, you turn each bento box into a compoment and you add a hover state to each, where you change some things about the comp like color, element’s position change and so on.
@@framer.university thanks for the replay, i bougth a package from a guy with transitions but in one of the upgrades in framer stop working, i would like to have any advice for solving this because i dont have any responde from the creador, but again, thanks for the support you are doing grate! ❤️
Thank you for the great video. I’d like to ask about a problem I’m encountering, and I’m not sure what I’m missing. I need to set the component to the ‘Fill’ option so that it adjusts to the screen width. The component always sets itself to ‘Fixed,’ and I can’t work with it further. Where am I going wrong? Thank you very much.
One more thing I would like to ask that is it possible to create an animation on the switching from one page to another from the specific section of home page like CMS collection, and it will gradually cover up the whole of the whole screen of the website or an mobile instead of opening the page on another on another tab let me know if it is possible in the Framer because I have seen so many websites having such animations and this animation just look like amazing
@@framer.universityi think what he trying to say is, Imagine pictures scrolling in a carousel and when you click on one of images instead of opening a new webpage he wants to animate the image and scale it to a bigger size covering the whole screen with the information regarding it on the same page and is also scrollable.
Hey Nandi, thank you for this tutorial, great lesson! For component variables, can we set up different hover states? So for example in your design, if i was to hover on the image for "Cursor image trail" i'd see a different image inside the card - can this be achieved with component variables? Thank you again!!
Hey! Appreciate your kind words. Yes you can definitely achieve that. On the hover state you can remove the variable and add a new one to it or leave it on a fixed value. Hope this helps!
Great video, thanks for the valuable content. However, I'm having trouble understanding the notion of event for the overlay. Why isn't event 1 displayed for the overlay and why do we have to create an event chain?
Good question! Because the event we create is always only visible on one layer back. So we have a nesting like: Homepage > Resource Card > Quick Preview Button. The event created on the Quick Preview Button will be accessible on one “layer of nesting” back, so in Resource Card. There, we can use it for an interaction, or if we decide that we wanna use the event on one layer back (Homepage) we can create another event on it, making a chain of events, pulling it to the outside (Homepage) so we can use it there as trigger for “show on” property of overlay. Lmk of this explanation makes sense! :)
Thank you so much for this and all the other vidoes! I am really grateful for your help! But I have a question, is it possible to make a variable for Lottie Files? Or only for images, texts, colors etc?
Hey Nan!! I’m encountering an issue with a component I created, and I was hoping you might be able to help. The component has a "Read More" button that triggers a state change, and it works perfectly when previewed individually. However, when I add the component to my main page (under the "main" layers), the button stops working - I can’t click it at all. Do you have any idea what might be causing this issue or how I can fix it?
You probably have some layers over the button that are preventing you from interacting with the button underneath them. Identify the frame that blocks the button, and add “pointer events none” style to it.
Hi nandi. I try to recreate a website for my practice but i don't know download or link the same video or images that are in the original website. Please can you help me
Hey Nandi is it possible to create the pixel distortion effect in Framer on hover, also I wanted to create the fluid scroll (horizontal or vertical whatever you would like) in Framer and when we scroll, stationary frames slightly changes its style (like a rectangle to oval) and whole following frames follow that effect / animation and afters the scroll stops it goes back to its original state and vice versa Please reply 🙂
If you can’t simply select the part of the text and change the color, then you’ll need to create separate text layers for solid and gradient. Hope this helps:)
I still have trouble linking different variables to different things. I have multiple items in my nav bar which are 1 component because they share an animation. I've changed the text each one has, but I can't change the link each one has.
some elements are not working the same even if i exactly apply the same as shown in the tutorial, for example, the frame within the button when you apply the radius to 100, which i did the same, mine doesnt look at all like an ellipse no matter how much i increase the radius, weird..
For the other commenters, you can't really master Framer until you know how to code. So much is off-limits without knowing how to code, and so much is off-limits even if you know how to code. What a dilemma.
@@framer.university Yeah, you mastered Framer for what it was intended to do, no-code and I can tell you are very proficient with it but imagine how much further you could go with code. There is a whole new world of stuff you can do with code in Framer. It's probably a matter of "you don't know what you're missing until you get there." I can see you know the importance of code as well since you made a video about ChatGPT a while ago. Also, you collaborate with coders to bring free components to the public. Framer treats developers as second-class citizens from how lacking the documentation is and also the code feature set in Framer is like a ghost town. No property controls for code overrides which they could easily add. Buggy code editor. No APIs for anything, unlike Wix Studio(which has APIs for literally everything). Much respect to you though, you carved out a niche for yourself for no-code and I'm all for it. Even developers like myself would rather not touch code if I don't have to.
Yeah definitely there are things you can’t do in Framer, but that’s exactly why I’m releasing components for highly requested features, making them accessible for everyone. Many of the things you’re mentioning are coming, such as property controls for code overrides or APIs. Stay tuned mate 🤝! Framer is gonna be big. They’re not stopping anytime soon. All gas, no brakes.
@@framer.university Yeah you are the Mother Teresa of Framer. Haha. Also I trust you, I know you have insider access to the latest stuff. Property controls for code overrides are finally coming ? That’s going to be lit.
If there’s anything that wasn’t explained clearly in the video, and you still have questions, please leave your feedback in the comments! 💙
Events was quite quickly. Would like to get more information about that.
This is the 2nd time I can't resist pausing the video in Framer University and jumping here to comment my gratitude for Nandi-this guy is A-M-A-Z-I-N-G. 100% feels like he's in the right corner in the universe-the perfect mentor for Framer, Man, the intros are always smooth yet 🔥
Love u guys so much! I have best students a teacher can wish for. Thanks so much for the support 🫶🫶
Without doubt the best nocode tutorials on the internet, across all platforms, not just Framer. Thanks very much for the clear, informative and creative content.
really appreciate it! 🙏 thank you for watching :)
Thank you, Nandi, for how you conducted the event variables, which really inspired me to adapt the feature to create a slide menu. I had some troubles with overlay before I saw your video, Now, I know how to deal with the issue. I'm a big fan of Framer University, and from several of your first tutorials, I learned a lot from you. On again thank you a lot.
Super happy to hear this :) You're very welcome!
Hey Captain, Pure respect and gratitude towards your work, Love from India!
Appreciate you mate! Your support means a lot 🫡
I didn't realize events variables could be used like this; it's really cool!
they're super powerful! :)
I've been trying to understand how to use event variables for so long and I believe this is the first tutorial I've come across that explains how to use them. I would really appreciate to see more examples of how we can use them. Thanks Nandi, you rock! 🙌🤘
Exactly, exactly we need more often videos dear Nandi
how often should I upload?
Really like Framer's component facility, much easier to digest that Webflow's classes / combo classes which can get v.complex to manage over a project I imagine!
I agree! Framer makes it so simple and easy to learn for non tech people 👌
Your voice recording sound quality is great for hearing 👌
Super happy to hear this since I've made some improvements to the recording and post production. Thanks :)
Straight to the point, love it
🫶 thank uu
Just started learning framer to create my portfolio. I'm already quite familiar with Figma but it can still get confusing so your videos are perfect!
You can do it mate! Keep learning :) I'm glad my vids help!
I actually just started learning framer today (same day this video was published) and needed a good tutorial on components ... right in time!
Hehe great timing! Let me know if something wasn’t explained clearly in the video!
Feedback is super valuable! 🫶
Kindly make more of these on other elements like frames, transition, etc
More to come! This is just the warmup ;)
Thank you Nandi - calm & informative, as ever.
Thanks mate! :) glad u liked this
I created Button , Toggle Component . Soon gonna make last 2 .Thanks Nandi
let's goo! practice makes perfect :)
Nandi make a tutorial on that dynamic menu component in the beginning of the video!! thats something you should post on youtube cause explaining what components are, is explained by thousands of others framer experts.What you teach and explains in the tutorials of building complex components which can be helpful in websites makes us watch and wait for your new videos!!!!
I might make a tutorial for the dynamic menu. Until then take a look at the remix:
framer.university/resources/dynamic-action-bar-in-framer
you make framer seem less scary, thank you :)
really my pleasure! :))
Way to go Nandi, you’re awesome
appreciate it! 🫡
you are awesome and inspiring! appreciate
Thank u sooo so much 🫶🫶
another useful video. thanks nandi ♥
glad u enjoyed it :)
thank you so much buddy for your awesome tuts! legend!
My pleasure! Glad you like em' :)
Great quality and value ! Thank you so much :)
thank you so much!
He really said I am gonna bless u
Hi Nandi. Love your style and your pacing is super. Learning lots. Are you using Loom to present?
Thank u so muuch
Really love these videos, thanks so much!
Thanks! Im glad u like them :))
3 times a week, 12 times a month. So that we can master Framer faster.
aye aye, captain!
You're not mastering Framer unless you know how to code. Every other thing needs code to solve.
@@edenassosyes, for now :)
Keep going, great masterclass!
thanks so much! i'll keep going 💙
I would love a video on how to create complex components like the one at the beginning that you used as an example
noted it! btw: if you want to check it yourself link to this component is in the vid description :)
nandi youre amazing
Dope video pro. To go back to the ON state you can click at the top where it says interactions and change it from "Off" to "Cycle Variant" saves yu having to link back to it
That’s a nice trick! Never even thought of using it for click interaction. I usually use it for auto looping appear interactions.
Thanks for the tip 🫶
Great Video. Please let me know if you can make a video on how to create a component toggle switch that will change on toggle and change for Desktop, tablet, and phone. I tried creating a custom contact card with Client or crew toggle and depending on which one there would be different questions. Had big issues when I created more than 4 variants and not sure what I did wrong
Transitions on component variable/events would be great to demonstrate.
Thank You so much for this video
I’m glad it was helpful 💙
Your video are amazing thanks !!!
Glad you liked it 🫶
Love framer❤
Framer's good 💙
Thanks for this. That click event for components was super useful. 🫡
Happy to hear it mate :)
These are great tutorials... But one tutorial I haven't seen that would greatly help me and probably a few others.
How to effectively navigate the support community and best practices to keep your sites up and running, because let's face facts. No matter how wiz-bang beautiful your site is, it's nothing if it's down because of some Framer bug.
But please, carry on
I have some videos on best practices:
framer.university/lessons/5-mistakes
Thank you so much !
You're welcome! 💙
Very well explained!!
Thanks for making the video and sharing these gems with us!
I'd love to know how to do the bento card animations :) like the ones that show the benefits/ features of a product
Thanks!! Have a great day!!
Hey!
Thanks for the kind words!
For a bento anim, you turn each bento box into a compoment and you add a hover state to each, where you change some things about the comp like color, element’s position change and so on.
You should consider introduce to the page transitions a funtion that can make a transition with a mask (SVG or shapes) this will be amasing
I might make a video on page transitions in the future! thanks for the suggestion 🫶
@@framer.university thanks for the replay, i bougth a package from a guy with transitions but in one of the upgrades in framer stop working, i would like to have any advice for solving this because i dont have any responde from the creador, but again, thanks for the support you are doing grate! ❤️
18:00 Also kindly make a video on transitions
Anything specific you want to know about them?
@@framer.university Spring transformation properties especially damping, mass, stiffness, etc
And also when are you going to make framer university live? and will it be paid or free?
And also the purple glasses in the thumbnail
Hehe.
Component™ glasses merch. 💜
nice tutorial. Great, thank sir
Happy I could help :)
Good job!
Thanks 🙏
Master content! So my question is: in last part of video (overlay) how can i block scroll from behind the overlay ?
there supposed to be a block scroll property on the right properties panel of the overlay.
great Sir
Much appreciated
Thank u so much.
my pleasure!
I wasn't aware about event thingy, If I knew this few weeks ago, I would've pull off my project sooner. But overall thanks for sharing this.
Glad I could help! :)
Omg! It’s niiiiiiiiiiiice ❤
Thank uu 🫡
Your videos are top notch. Any ETA for your paid course.
Really appreciate ya!
No ETA yet. Wanna release something special. Needs time!:)
Sorry mate and stay tuned 🤝
Thank you for the great video. I’d like to ask about a problem I’m encountering, and I’m not sure what I’m missing. I need to set the component to the ‘Fill’ option so that it adjusts to the screen width.
The component always sets itself to ‘Fixed,’ and I can’t work with it further. Where am I going wrong?
Thank you very much.
It can only be set to fill if the parent frame is a stack.
Thanks!
i hope this video will help 🫶
you rock man
🫶🫶
One more thing I would like to ask that is it possible to create an animation on the switching from one page to another from the specific section of home page like CMS collection, and it will gradually cover up the whole of the whole screen of the website or an mobile instead of opening the page on another on another tab let me know if it is possible in the Framer because I have seen so many websites having such animations and this animation just look like amazing
Are you talking about an overlay?
Like the quick preview interaction on framer.university/resources (the button on top right corner of cards)?
@@framer.universityi think what he trying to say is, Imagine pictures scrolling in a carousel and when you click on one of images instead of opening a new webpage he wants to animate the image and scale it to a bigger size covering the whole screen with the information regarding it on the same page and is also scrollable.
thanx
Anytime 🫶
Hey Nandi, thank you for this tutorial, great lesson! For component variables, can we set up different hover states? So for example in your design, if i was to hover on the image for "Cursor image trail" i'd see a different image inside the card - can this be achieved with component variables? Thank you again!!
Hey! Appreciate your kind words.
Yes you can definitely achieve that. On the hover state you can remove the variable and add a new one to it or leave it on a fixed value. Hope this helps!
@@framer.university Ah okay, makes sense. Will give it a try, thanks for responding! :)
Is there a reason for the toggle component you didn’t use the pressed state over creating a new variant?
Great video, thanks for the valuable content.
However, I'm having trouble understanding the notion of event for the overlay. Why isn't event 1 displayed for the overlay and why do we have to create an event chain?
Good question!
Because the event we create is always only visible on one layer back.
So we have a nesting like:
Homepage > Resource Card > Quick Preview Button.
The event created on the Quick Preview Button will be accessible on one “layer of nesting” back, so in Resource Card. There, we can use it for an interaction, or if we decide that we wanna use the event on one layer back (Homepage) we can create another event on it, making a chain of events, pulling it to the outside (Homepage) so we can use it there as trigger for “show on” property of overlay.
Lmk of this explanation makes sense! :)
Is there key/gamepad & drag interaction available for interactive components in framer like figma?
Not yet!
Thank you so much for this and all the other vidoes! I am really grateful for your help!
But I have a question, is it possible to make a variable for Lottie Files? Or only for images, texts, colors etc?
How do you copy the styles from hovered and pressed to the next variant?
Unfortunately you can’t do that.
but is it possible to change the texts in button instances?
watch the full video hehe 22:35
Hey Nan!! I’m encountering an issue with a component I created, and I was hoping you might be able to help. The component has a "Read More" button that triggers a state change, and it works perfectly when previewed individually. However, when I add the component to my main page (under the "main" layers), the button stops working - I can’t click it at all.
Do you have any idea what might be causing this issue or how I can fix it?
You probably have some layers over the button that are preventing you from interacting with the button underneath them.
Identify the frame that blocks the button, and add “pointer events none” style to it.
Hi nandi. I try to recreate a website for my practice but i don't know download or link the same video or images that are in the original website. Please can you help me
You can go into inspect mode in the browser and get assets from there.
Google “Getting Website Assets From Inspector”.
Hey Nandi is it possible to create the pixel distortion effect in Framer on hover, also I wanted to create the fluid scroll (horizontal or vertical whatever you would like) in Framer and when we scroll, stationary frames slightly changes its style (like a rectangle to oval) and whole following frames follow that effect / animation and afters the scroll stops it goes back to its original state and vice versa
Please reply 🙂
Can you send an example of what you’re looking to create?
Thank you very muchh
appreciate it!
how to apply both gradient and solid colors to one heading?
If you can’t simply select the part of the text and change the color, then you’ll need to create separate text layers for solid and gradient. Hope this helps:)
E-vent 29:51
Thanks bud! Just checked the correct pronunciation. Will do my best to improve :)
and why when i create the button as a component it doesnt show me the button component but rather only a rectangle variant dont get it....
I still have trouble linking different variables to different things. I have multiple items in my nav bar which are 1 component because they share an animation. I've changed the text each one has, but I can't change the link each one has.
1 second after commenting I found out: I have to create a link variable for the text as well, now it's an option.
great you solved it! let's gooo
how could i join Framer University ?
Wait for the release (next year) and then you can join:) 🤝
some elements are not working the same even if i exactly apply the same as shown in the tutorial, for example, the frame within the button when you apply the radius to 100, which i did the same, mine doesnt look at all like an ellipse no matter how much i increase the radius, weird..
G.O.A.T
🫡🙏
Gets confusing when you get the overlay. That part needs more details.
For the other commenters, you can't really master Framer until you know how to code. So much is off-limits without knowing how to code, and so much is off-limits even if you know how to code. What a dilemma.
Well, I don’t know how to code and I think I mastered Framer pretty well lol
@@framer.university Yeah, you mastered Framer for what it was intended to do, no-code and I can tell you are very proficient with it but imagine how much further you could go with code. There is a whole new world of stuff you can do with code in Framer. It's probably a matter of "you don't know what you're missing until you get there." I can see you know the importance of code as well since you made a video about ChatGPT a while ago. Also, you collaborate with coders to bring free components to the public.
Framer treats developers as second-class citizens from how lacking the documentation is and also the code feature set in Framer is like a ghost town. No property controls for code overrides which they could easily add. Buggy code editor. No APIs for anything, unlike Wix Studio(which has APIs for literally everything).
Much respect to you though, you carved out a niche for yourself for no-code and I'm all for it. Even developers like myself would rather not touch code if I don't have to.
Yeah definitely there are things you can’t do in Framer, but that’s exactly why I’m releasing components for highly requested features, making them accessible for everyone.
Many of the things you’re mentioning are coming, such as property controls for code overrides or APIs.
Stay tuned mate 🤝! Framer is gonna be big. They’re not stopping anytime soon.
All gas, no brakes.
@@framer.university Yeah you are the Mother Teresa of Framer. Haha.
Also I trust you, I know you have insider access to the latest stuff. Property controls for code overrides are finally coming ? That’s going to be lit.
🫡🫡
thank you nandi , i just sent you an email back
Thanks a lot!
my pleasure! :))