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
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 🙂
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
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.
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.
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
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 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.
@@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! ❤️
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!
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
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.
What if you want your text variable to hold a link in it is it possible , because this is the problem im facing now, Im using a FAQ insert component but it only allows text for now and im trying to add links to the text variable
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.
Exactly, exactly we need more often videos dear Nandi
how often should I upload?
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 🫶🫶
I didn't realize events variables could be used like this; it's really cool!
they're super powerful! :)
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 🫡
Love your tutorials Nandi, I've learned a lot from your videos!
Would love to see a deeper dive into events with other use cases :)
glad the tutorials have been helpful for you! 😊
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 :)
Kindly make more of these on other elements like frames, transition, etc
More to come! This is just the warmup ;)
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!
I agree! Framer makes it so simple and easy to learn for non tech people 👌
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! 🫶
Straight to the point, love it
🫶 thank uu
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
Thank you Nandi - calm & informative, as ever.
Thanks mate! :) glad u liked this
Way to go Nandi, you’re awesome
appreciate it! 🫡
you make framer seem less scary, thank you :)
really my pleasure! :))
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 :)
I created Button , Toggle Component . Soon gonna make last 2 .Thanks Nandi
let's goo! practice makes perfect :)
another useful video. thanks nandi ♥
glad u enjoyed it :)
He really said I am gonna bless u
Dear Nandi, Thank you for this
my pleasure mate! hope you liked it :)
Keep going, great masterclass!
thanks so much! i'll keep going 💙
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!
Really love these videos, thanks so much!
Thanks! Im glad u like them :))
you are awesome and inspiring! appreciate
Thank u sooo so much 🫶🫶
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 :)
Hi Nandi. Love your style and your pacing is super. Learning lots. Are you using Loom to present?
Thank u so muuch
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 🫶
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?
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
Thank You so much for this video
I’m glad it was helpful 💙
How do you copy the styles from hovered and pressed to the next variant?
Unfortunately you can’t do that.
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.
Thank you so much !
You're welcome! 💙
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.
Good job!
Thanks 🙏
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.
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
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! :)
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?
Your video are amazing thanks !!!
Glad you liked it 🫶
Is there key/gamepad & drag interaction available for interactive components in framer like figma?
Not yet!
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.
Love framer❤
Framer's good 💙
but is it possible to change the texts in button instances?
watch the full video hehe 22:35
nice tutorial. Great, thank sir
Happy I could help :)
And also the purple glasses in the thumbnail
Hehe.
Component™ glasses merch. 💜
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! ❤️
Omg! It’s niiiiiiiiiiiice ❤
Thank uu 🫡
Transitions on component variable/events would be great to demonstrate.
Thanks!
i hope this video will help 🫶
you rock man
🫶🫶
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! :)
great Sir
Much appreciated
Beautiful explained you cutie! ❤
🫡
Is there a reason for the toggle component you didn’t use the pressed state over creating a new variant?
Thank u so much.
my pleasure!
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 🤝
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”.
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.
What if you want your text variable to hold a link in it is it possible , because this is the problem im facing now, Im using a FAQ insert component but it only allows text for now and im trying to add links to the text variable
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! :)
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:)
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....
thanx
Anytime 🫶
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
Thank you very muchh
appreciate it!
E-vent 29:51
Thanks bud! Just checked the correct pronunciation. Will do my best to improve :)
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
🫡🙏
how could i join Framer University ?
Wait for the release (next year) and then you can join:) 🤝
F**king Great Thank You!!!
Ahhh thaanks 🥹
love u
love u 2
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.
🫡🫡
Gets confusing when you get the overlay. That part needs more details.
Thanks for this. That click event for components was super useful. 🫡
Happy to hear it mate :)
thank you nandi , i just sent you an email back
Thanks a lot!
my pleasure! :))